this 的运用 - ASP技术论坛

楼主

问题点数：0 回复次数：7

this 的运用

有那位能帮忙讲讲this（javascript) 的概念啊，我始终不太明白它的用法和优势

搜索更多相关主题的帖子: 位能　 javascript　用法　概念　优势　

第 2 楼

得分:0

javascript中的this关键字是一个当前对象的指针，在程序里可以省略对象名。

第 3 楼

得分:0

能举个对比的例子吗？？
斑竹

第 4 楼

得分:0

import java.awt.*;
import java.applet.Applet;

class Piece extends Object {
int x, y, width, height, unit;
int xloc, yloc;

public Piece (int xloc, int yloc, int x, int y, int width, int height, int unit) {
this.xloc = xloc;
this.yloc = yloc;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.unit = unit;
}

public void drawPiece (Graphics g, Image pieceImage) {
int x = (xloc * unit) + (unit >> 1);
int y = (yloc * unit) + (unit >> 1);
Graphics gcopy = g.create();
gcopy.clipRect(x, y, width * unit, height * unit);
gcopy.drawImage(pieceImage, x - (this.x * unit), y - (this.y * unit), null);
gcopy.dispose();
}

public boolean intersects (Piece piece, int x, int y) {
if (((x + piece.width - 1) < xloc) || (x > (xloc + width - 1)))
return false;
if (((y + piece.height - 1) < yloc) || (y > (yloc + height - 1)))
return false;
return true;
}

public boolean picks (int x, int y) {
if (x < xloc || x > (xloc + width - 1) || y < yloc || y > (yloc + height - 1))
return false;
return true;
}

public boolean onBoard (int x, int y) {
if (x < 0 || y < 0 || (x + width) > 4 || (y + height) > 5)
return false;
return true;
}

public void moveTo (int x, int y) {
this.xloc = x;
this.yloc = y;
}
}

class PuzzleBoard extends Canvas {
private Image offscreenImage, boardImg, piecesImg;
private int width, height, unit, pickedX, pickedY, pickedXoff, pickedYoff, lastX, lastY;
private int widthBoard, heightBoard, widthPieces, heightPieces;
private Graphics offscr;
private Piece[] pieces = new Piece[10];
private Piece pickedPiece = null;

public PuzzleBoard (int x, int y, int width, int height, Applet a) {
super();
this.width = width;
this.height = height;
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(boardImg = a.getImage(a.getCodeBase(), "board.gif"), 0);
tracker.addImage(piecesImg = a.getImage(a.getCodeBase(), "pieces.gif"), 0);
// Start loading Images and wait for both to finish loading
try { tracker.waitForAll(); } catch (InterruptedException e) { ; }
// Get width and height of both Images, now that they're loaded
widthBoard = boardImg.getWidth(this);
heightBoard = boardImg.getHeight(this);
widthPieces = piecesImg.getWidth(this);
heightPieces = piecesImg.getHeight(this);
a.add(this);
reshape(x, y, width, height);
// Define the puzzle pieces
unit = heightPieces >> 2;
pieces[0] = new Piece(0, 0, 0, 0, 1, 2, unit);
pieces[1] = new Piece(0, 2, 1, 0, 1, 2, unit);
pieces[2] = new Piece(3, 0, 0, 2, 1, 2, unit);
pieces[3] = new Piece(3, 2, 1, 2, 1, 2, unit);
pieces[4] = new Piece(0, 4, 2, 0, 1, 1, unit);
pieces[5] = new Piece(1, 3, 2, 1, 1, 1, unit);
pieces[6] = new Piece(2, 3, 2, 2, 1, 1, unit);
pieces[7] = new Piece(3, 4, 2, 3, 1, 1, unit);
pieces[8] = new Piece(1, 2, 3, 2, 2, 1, unit);
pieces[9] = new Piece(1, 0, 3, 0, 2, 2, unit);
// Create offscreen buffer <width> pixels wide and <height> pixels tall
offscreenImage = createImage(width, height);
offscr = offscreenImage.getGraphics();
repaint();
}

public void pickPiece (int x, int y) {
int off = unit >> 1;
if (x >= off && y >= off && x < ((unit * 4) + off) && y < ((unit * 5) + off)) {
x = (x - off) / unit;
y = (y - off) / unit;
for (int ii = 0; ii < pieces.length; ii++) {
if (pieces[ii].picks(x, y)) {
pickedPiece = pieces[ii];
pickedXoff = x - pickedPiece.xloc;
pickedYoff = y - pickedPiece.yloc;
pickedX = pickedPiece.xloc;
pickedY = pickedPiece.yloc;
return;
}
}
}
pickedPiece = null;
}

public void tryMove (int x, int y) {
pickedX += x;
pickedY += y;
x = pickedPiece.xloc + x;
y = pickedPiece.yloc + y;
if (pickedPiece.onBoard(x, y)) {
for (int ii = 0; ii < pieces.length; ii++) {
if (pickedPiece != pieces[ii] && pieces[ii].intersects(pickedPiece, x, y))
return;
}
pickedPiece.moveTo(x, y);
repaint();
}
}

public void movePiece (int x, int y) {
int dx, dy;
int off = unit >> 1;

if (pickedPiece != null) {
if (x >= off && y >= off && x < ((unit * 4) + off) && y < ((unit * 5) + off)) {
x = ((x - off) / unit) - pickedXoff;
y = ((y - off) / unit) - pickedYoff;
while (pickedX != x || pickedY != y) {
if (x > pickedX)
tryMove(1, 0);
else if (x < pickedX)
tryMove(-1, 0);
else if (y > pickedY)
tryMove(0, 1);
else
tryMove(0, -1);
}
}
}
}

public void paint (Graphics g) {
if (offscr != null) {
offscr.drawImage(boardImg, 0, 0, this);
for (int ii = 0; ii < pieces.length; ii++)
pieces[ii].drawPiece(offscr, piecesImg);
g.drawImage(offscreenImage, 0, 0, this);
}
}

public void update (Graphics g) {
paint(g);
}
}

public class Puzzle extends Applet {
private PuzzleBoard slider;

public void init() {
super.init();
setLayout(null);
slider = new PuzzleBoard(0, 0, size().width, size().height, this);
}

public boolean mouseDown (Event evt, int x, int y) {
if (slider != null)
slider.pickPiece(x, y);
return true;
}

public boolean mouseDrag (Event evt, int x, int y) {
if (slider != null)
slider.movePiece(x, y);
return true;
}
}

我就是什么都不会

第 5 楼

得分:0

楼上的是JAVA...
JavaScript中this关键字使用在面向对象编程语言中，对于this关键字我们是非常熟悉的。比如C++、C#和Java等都提供了这个关键字，虽然在开始学习的时候觉得比较难，但只要理解了，用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字，不过用起来就比经典OO语言中要"混乱"的多了。

下面就来看看，在JavaScript中各种this的使用方法有什么混乱之处？

1、在HTML元素事件属性中inline方式使用this关键字：
<div onclick="
// 可以在里面使用this
">division element</div>

我们一般比较常用的方法是在此使用：javascirpt: EventHandler(this)，这样的形式。不过这里其实可以写任何合法的JavaScript语句，要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法，而onclick指向这个方法。

2、用DOM方式在事件处理函数中使用this关键字：

<div id="elmtDiv">division element</div>
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.attachEvent('onclick', EventHandler);
function EventHandler()
{
// 在此使用this
}
</script>

这时的EventHandler()方法中的this关键字，指示的对象是IE的window对象。这是因为 EventHandler只是一个普通的函数，对于attachEvent后，脚本引擎对它的调用和div对象本身没有任何的关系。同时你可以再看看 EventHandler的caller属性，它是等于null的。如果我们要在这个方法中获得div对象引用，应该使用： this.event.srcElement。

3、用DHTML方式在事件处理函数中使用this关键字：

<div id="elmtDiv">division element</div>
<script language="javascript">
var div = document.getElementById('elmtDiv');
div.onclick = function()
{
// 在此使用this
};
</script>

这里的this关键字指示的内容是div元素对象实例，在脚本中使用DHTML方式直接为div.onclick赋值一个 EventHandler的方法，等于为div对象实例添加一个成员方法。这种方式和第一种方法的区别是，第一种方法是使用HTML方式，而这里是 DHTML方式，后者脚本解析引擎不会再生成匿名方法。

4、类定义中使用this关键字：

function JSClass()
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();

这是JavaScript模拟类定义中对this的使用，这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用，运行上面的程序会被告知myName未定义。

5、为脚本引擎内部对象添加原形方法中的this关键字：

Function.prototype.GetName = function()
{
var fnName = this.toString();
fnName = fnName.substr(0, fnName.indexOf('('));
fnName = fnName.replace(/^function/, '');
return fnName.replace(/(^\s+)|(\s+$)/g, '');
}
function foo(){}
alert(foo.GetName());

这里的this指代的是被添加原形的类的实例，和4中类定义有些相似，没有什么太特别的地方。

6、结合2&4，说一个比较迷惑的this关键字使用：

我就说说结果，页面运行后会显示："division element"，确定后点击文字"division element"，将会显示："undefined"。

7、CSS的expression表达式中使用this关键字：

<table width="100" height="100">
<tr>
<td>
<div style="width: expression(this.parentElement.width);
height: expression(this.parentElement.height);">
division element</div>
</td>
</tr>
</table>

这里的this看作和1中的一样就可以了，它也是指代div元素对象实例本身。

8、函数中的内部函数中使用this关键字：

function OuterFoo()
{
this.Name = 'Outer Name';

function InnerFoo()
{
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();

运行结果显示是："Inner Name, Outer Name"。按我们在2中的讲解，这里的结果如果是"Inner Name, undefined"似乎更合理些吧？但是正确的结果确实是前者，这是由于JavaScript变量作用域的问题决定的，详细了解推荐参看JavaScript中的关键字”VAR”使用祥解。

说了这么多JavaScript中this的用法，其实this最根本的特性还是和OO语言中的定义相吻合的。之所以有这么多看似混乱的使用方式，是因为 JavaScript语言(解释器和语言本身的内容)本身在实现上是遵循OO的(Object-based)，连它的所有数据类型都是对象，也有 Object这样一个super Object。但是这个语言在运行上(runtime)，就没有遵循完备的OO特点，所以就出现了this的指代混乱。

[此贴子已经被作者于2007-6-22 12:24:57编辑过]

第 6 楼

得分:0

谢谢楼上的啊
可是我是初学，只是不知道THIS在JS中为什么好用，简练？
它与平常的写法有什么不同？？

第 7 楼

得分:0

javascript中的this关键字是一个当前对象的指针，在程序里可以省略对象名。

给个例子好不

第 8 楼

得分:0

[CODE]<html>
<head>
<title>下拉列表取值</title>
var tSel;//这个变量实际是一个用来接收列表框的对象引用
function Test_Sel(vSel)
{
tSel=vSel;//这里是对象传递，并非普通的变量传递
}
function btnA_Click()
{
var testSel=document.getElementById("TestSel");
//注意这里的这句话是在对列表框进行定位.
var selVal=testSel.options[testSel.selectedIndex].value;
alert('下拉列表选中的值为'+selVal);
}
function btnB_Click()
{
//这两个函数是极其相似的，唯一不同是一个用
//定位的方法找到下拉列表，另一个是用this关键字
//用全局对象引用来定位
var selVal=tSel.options[tSel.selectedIndex].value;
alert('下拉列表选中的值为'+selVal);
}
</head>
<body>

<select id="TestSel" onChange="Test_Sel(this);" >
<option value="选项1" >选项1</option>
<option value="选项2" >选项2</option>
<option value="选项3" >选项3</option>
</select>
<input type="button" name="btnA" value="不用this取值" onClick="btnA_Click();" >
<input type="button" name="btnB" value="用this取值" onClick="btnB_Click();" >
</body>
</html>[/CODE]