标题:this 的运用
只看楼主
想象力
Rank: 1
等 级:新手上路
帖 子:78
专家分:0
注 册:2007-6-8
 问题点数:0 回复次数:7 
this 的运用
有那位能帮忙讲讲this(javascript) 的概念啊,我始终不太明白它的用法和优势
搜索更多相关主题的帖子: 位能 javascript 用法 概念 优势 
2007-06-21 15:35
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
得分:0 

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

2007-06-21 21:02
想象力
Rank: 1
等 级:新手上路
帖 子:78
专家分:0
注 册:2007-6-8
得分:0 
能举个对比的例子吗??
斑竹
2007-06-22 10:36
kennychaly
Rank: 1
等 级:新手上路
帖 子:39
专家分:0
注 册:2007-6-19
得分: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;
}
}


我就是什么都不会
2007-06-22 11:12
enlangs
Rank: 1
等 级:等待验证会员
威 望:2
帖 子:218
专家分:0
注 册:2007-5-28
得分: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关键字使用:

function JSClass()
{
this.m_Text = 'division element';
this.m_Element = document.createElement('DIV');
this.m_Element.innerHTML = this.m_Text;

this.m_Element.attachEvent('onclick', this.ToString);
}

JSClass.prototype.Render = function()
{
document.body.appendChild(this.m_Element);
}
JSClass.prototype.ToString = function()
{
alert(this.m_Text);
};
var jc = new JSClass();
jc.Render();
jc.ToString();



我就说说结果,页面运行后会显示:"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编辑过]

2007-06-22 12:22
想象力
Rank: 1
等 级:新手上路
帖 子:78
专家分:0
注 册:2007-6-8
得分:0 

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

2007-06-22 13:18
想象力
Rank: 1
等 级:新手上路
帖 子:78
专家分:0
注 册:2007-6-8
得分:0 
javascript中的this关键字是一个当前对象的指针,在程序里可以省略对象名。

给个例子好不
2007-06-22 13:19
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
得分: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>
<!--注意这个函数Test_Sel(this);这里this代表了下拉列表对象-->
<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]
2007-06-22 20:18



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-149271-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.019491 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved