javascript的this对象

大米aBigRice

我们知道,this对象是在运行时基于执行函数的执行环境绑定:在全局函数中,this等于window,而当函数被当做某个对象的方法调用时,this等于那个对象。

this的使用环境分以下几种情况:

  • 普通函数调用
  • 作为构造函数调用
  • 作为对象的方法来调用
  • call/apply/bind方法的调用

普通函数调用

单纯函数调用属于全局调用,this指向this指向Global对象,在浏览器着就是window对象。

var name = "the window";
function fn(){
    alert(this.name);
}
fn();    //the window

这个例子很好理解。在全局作用域中声明的变量、函数,都会变成window对象的属性、方法,this指向window

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn() // ?
        arguments[0]() // ?
    }
}
obj.method(fn)      //10  1

这个例子就不太好理解了。这里fn依然是单纯的函数调用,我们知道,每个函数在被调用时,都会自动取得两个特殊变量:this和arguments。内部函数搜索这两个变量时,只会搜索到其活动对象为止。所以这里fn中的this指向window。
另外要注意arguments是一个对象,对象属于除了点操作符还可以用中括号,arguments[0]()其实是fn作为arguments对象的方法被调用,this指向arguments,因为参数只有一个fn,因此length为1

var length = 10
var obj = {
    length: 5,
    method: function() {
        function fn(){
            alert(this.length)
        }
        fn();
    }
}
obj.method()     //10

再稍微变换一下代码,this依然指向window

作为对象的方法调用

函数被作为某个方法时,this等于那个对象

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: fn
}
obj.method()      //5

再换一个例子

function fn(){
    alert(this.length)
}
var obj1 = {
    length: 5,
    method: fn
}
var obj2 = {
    length: 6,
    method: obj1.method
}
obj2.method()      //6

作为构造函数调用

通过new操作符来调用函数,创建一个新的对象,将构造函数的作用域赋予给新对象,因此this指向这个新对象。

var name = "windowName";
function fn(name){
    this.name = name;
    this,sayName = function(){
        alert(this.name);
    }
}
fn("fnName");     //fnName

call/apply/bind方法的调用

这三个方法都是通过传递参数改变函数体内的this。call和apply方法的作用相同,函数体内的this指向的第一个参数。

var name = "window";
var o = {
    name: "object"
};

function fn(){
    alert(this.name)
}

fn.call(this);  //window
fn.call(window);  //window
fn.call(o);       //object
var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
obj2.fn.call(obj1,"new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

bind方法会创建一个函数的实例,其this值会被绑定到传给bind()函数的值

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
var obj = obj2.fn.bind(obj1);
obj("new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

参考资料



关注作者吧~

clipboard.png

阅读 2.3k

aBigRice
半吊子程序员,瞎折腾美食家,欢迎交流

欢迎我呀~

219 声望
21 粉丝
0 条评论

欢迎我呀~

219 声望
21 粉丝
文章目录
宣传栏