您的位置：首页 > Web前端 > JavaScript

js中this用法详解（2）

2017-11-08 14:20 495 查看

js

中的this

我们要记住：

this

永远指向函数运行时所在的对象！而不是函数被创建时所在的对象。

this

对象是在运行时基于函数的执行环境绑定的，在全局环境中，

this

等于

window

先来看个例子：

<script>
var fullname = "Trigkit4";
var person = {
fullname : 'Jack',
prop:{
fullname : 'Blizzard',
getFullname : function () {
return this.fullname;
}
}
};

console.log(person.prop.getFullname());//Blizzard
var test = person.prop.getFullname;
console.log(test());//Trigkit4
</script>

当

getFullname

被分配到

test

变量时，上下文指的是全局对象

（window）

。这是因为

test

是被隐式设置为全局对象的属性。出于这个原因，该函数返回

window

的

fullname

，所以在这里

this

指的是

window

，
所以返回的是第一个

fullname

说明

this

关键字通常在对象的构造函数中使用，用来引用对象。

关键字

this

：总是指向调用该方法的对象，如：

var iCar = new Object();
iCar.color = "red";
iCar.showColor = function(){
alert(this.color);//输出"red"
};

关键字

this

用在对象的

showColor()

方法中，在此环境，

this

等于

iCar

使用

this

是因为在实例化对象时，总是不能确定开发者会使用什么样的变量名。使用

this

，即可在任意多个地方重用同一个函数。考虑下面的例子：

function showColor(){
alert(this.color);
}
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;

var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showcolor = showcolor;

oCar1.showColor();//输出"red"
oCar2.showColor();//输出"blue"

这段代码中，首先用

this

定义函数

showColor()

，然后创建两个对象

oCar1

和

oCar2

，一个对象属性被设置为"

red

",另一个为

blue

；两个对象都被赋予了属性

showColor

，指向原始的

showColor()

函数，调用每个

showColor

的方法，

oCar1

输出

red

，

oCar2

输出

blue

。

引用对象属性时，必须使用

this

关键字。

所有基于全局作用域的变量其实都是

window

对象的属性（property）。这意味着即使是在全局上下文中，

this

变量也能指向一个对象。

对于

JScript

的客户版本，如果在其他所有对象的上下文之外使用

this

，则它指的是

window

对象。
例如：

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript">
alert(this);//弹出 object window；
</script>
</head>
<body>

</body>

作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，

this

就指这个新对象。

<script type="text/javascript">
function test(){
this.x = 10;
}

var obj = new test();
alert(obj.x); //弹出 10；
</script>

全局环境中的this

在看下面一个

this

出现在全局环境中的例子：

<script type="text/javascript">
var name = "全局";
function getName(){
var name = "局部";
return this.name;
};
alert(getName());//弹出 全局；
</script>

函数

getName()

所处的对象是

window

对象，因此

this

也一定在

window

对象中。此时的

this

指向

window

对象，所以

getName()

返回的

this.name

其实是

window.name

，因此

alert

出全局。

结论：无论

this

身处何处，一定要找到函数运行时（或者说在何处被调用
了）的位置。

通过不同的调用语法，改变相同函数内部

this

的值：

<script type="text/javascript">
var foo = {
test:function(){
alert(this);
}
}
foo.test();//object,因为test方法在调用时属于foo对象

var baz = foo.test;
baz();//window,因为baz()被调用时属于global对象
</script>

局部环境中的this

看下面一个

this

出现在局部环境中的例子

<script type="text/javascript">
var name = "全局";

var jubu={
name:"局部",
getName:function(){
return this.name;
}
};
alert(jubu.getName());
</script>

其中

this

身处的函数

getName

不是在全局环境中，而是处在jubu环境中。无论

this

身处何处，一定要找到函数运行时的位置。此时函数

getName

运行时的位置：

alert(jubu.getName());

显然，函数

getName

所在的对象是

jubu

，因此

this

的安身之处定然在

jubu

，即指向

jubu

对象，则

getName

返回的

this.name

其实是

jubu.name

，因此

alert

出来的是“局部”！

作用域链中的this

<script type="text/javascript">
function scoping () {
console.log(this);

return function () {
console.log(this);
};
}

scoping()();
>>window
>> window
</script>

因为

scoping

函数属于window对象，自然作用域链中的函数也属于

window

对象。

对象中的this

可以在对象的任何方法中使用

this

来访问该对象的属性。这与用

new

得到的实例是不一样的。

var obj = {
foo: "test",
bar: function () {
console.log(this.foo);
}
};

obj.bar(); // "test"

重写this

无法重写

this

，因为它是一个关键字。

function test () {
var this = {};  // Uncaught SyntaxError: Unexpected token this
}

jquery中的this

$()

生成的是什么呢？实际上

$()=jquery()

，那么也就是说返回的是一个

jquery

的对象。

$(this)

是

jquery

对象，能调用

jquery

的方法，例如

click()

keyup()

。

$(function () {
$('button').click(function () {
alert(this);//this 表示原生的DOM
//$(this)表示当前对象，这里指的是button
})
});

结论：

this

，表示当前的上下文对象是一个

html
DOM

对象，可以调用

html

对象所拥有的属性，方法。

$(this)

,代表的上下文对象是一个

jquery

的上下文对象，可以调用

jquery

的方法和属性值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航