码迷,mamicode.com
首页 > 编程语言 > 详细

javascript this 的工作原理

时间:2014-05-22 01:16:19      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。

1.全局范围内

当在全部范围内使用 this,它将会指向全局对象。

2.函数调用

foo();   这里的this,也指向全局对象。

3.方法调用

bubuko.com,布布扣
var test = {};
test.foo = function(){
    console.log( this === test ); // true      
}
test.foo(); // 这里this指的是test
bubuko.com,布布扣

4.调用构造函数

 

bubuko.com,布布扣
var Foo = function(name){
    this.name = name; //这里的this指的是通过new关键字创建的实例对象
}
var foo = new Foo("Mr.枫");
console.log(foo.name); //Mr.枫
bubuko.com,布布扣

 

5.显式的设置 this

 

bubuko.com,布布扣
var bar = {};
function foo(a, b, c) {
    console.log(this === bar);  // true
}
foo.call(bar, 1, 2, 3); 
foo.apply(bar, [1, 2, 3]); 
bubuko.com,布布扣

当使用 Function.prototype 上的 call 或者 apply 方法时,函数内的 this将会被 显式设置为函数调用的第一个参数。


 

 

注意:

在对象的字面声明语法中,this 不能用来指向对象本身。

eg:

bubuko.com,布布扣
var obj = {
    me : this
}
bubuko.com,布布扣

这里的 obj.me 不会指向 obj 指向的是这段代码的当前作用域下的this,若在浏览器中运行,指向的是window对象。


 

常见误解:

1.第二个规则,也就是直接调用函数时,this 指向全局对象,被认为是JavaScript语言一个错误设计的地方,因为它从来就没有实际的用途。

 

bubuko.com,布布扣
Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象)
    }
    test();
}
bubuko.com,布布扣

一个常见的误解是 test 中的 this 将会指向 Foo 对象,实际上不是这样子的。

为了在 test 中获取对 Foo 对象的引用,我们需要在 method 函数内部创建一个局部变量指向 Foo 对象。

bubuko.com,布布扣
Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}
bubuko.com,布布扣

that 只是我们随意起的名字,不过这个名字被广泛的用来指向外部的 this对象。

 

2.另一个看起来奇怪的地方是函数别名,也就是将一个方法赋值给一个变量。

bubuko.com,布布扣
var test = someObject.methodTest;// 将方法赋值给变量test
test();
bubuko.com,布布扣

上例中,test 就像一个普通的函数被调用;因此,函数内的 this 将不再被指向到 someObject 对象。

 

javascript this 的工作原理,布布扣,bubuko.com

javascript this 的工作原理

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/chenqf/p/3737665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!