JS中this的指向问题（读书笔记纯手打~）

一、this

　　JavaScrip的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

二、this的指向

　根据运用情景可分为四类：

　　1.作为对象的方法调用；

　　2.作为普通函数调用；

　　3.构造器调用；

　　4.Function.prototype.call或Function.prototype.apply调用。

1.作为对象的方法调用：

　　当函数作为对象的方法被调用时，this指向该对象：

var obj = {

    a :1,

    getA:function () {

        alert(this === obj);//true

        alert(this.a) //1

    }

};

obj.getA();

　 2.作为普通函数调用；

　　当函数不作为对象的属性被调用时，即该函数为普通函数时，此时this的指向时全局对象，在浏览器的js中，这个全局对象也就是window。

window.name = 'hello world';

var getName = function () {

    return this.name;

}

console.log(getName());//hello world

　　或

window.name = 'hello world';

var obj = {

    name : 'ling',

    getName : function () {

        return this.name;

    }

};

var getName = obj.getName;

console.log(getName()); //hello world

console.log('obj----'+obj.getName());//obj----ling

　　那么怎么解决这个问题呢。。。。。在书上居然也讲了我之前写前端时公司老同志教我的方法，哈哈哈~~~那就是“that”大法！

//假设节点id为abc

window.id = 'ling';

document.getElementById('ling').onclick = function () {

    alert(this.id); //abc

    var callback = function () {

        alert(this.id);//ling

    }

    callback();

};

　　方法如下~~

//假设节点id为abc

window.id = 'ling';

document.getElementById('ling').onclick = function () {

    var that = this;

    var callback = function () {

        alert(that.id);//abc

    }

    callback();

};

　3.构造器调用；

　　js中没有类，但是我们可以从构造器中创建对象，同时也提供了new运算符使得构造器看起来更像一个类。

　　当使用new运算符调用函数时，该函数总会返回一个对象，通常情况下。构造器里的this就指向这个返回的对象。

var MyClass = function () {

    this.name = 'ling';

}

var obj = new MyClass();

console.log(obj.name);//ling

　　但是要特别注意如果函数显示地返回一个对象，那么this指的便是这个显示对象。若显示返回的是非对象类型（string等），则不会出现下面的问题。

var MyClass = function () {

    this.name = 'ling';

    return {

        a : 'abc'

    };

}

var obj = new MyClass();

console.log(obj.name);//undefined

console.log(obj.a);//abc

　　4.Function.prototype.call或Function.prototype.apply调用。

　　与普通函数相比，用call()和apply()可以动态改变传入函数的this指向。

var obj1 = {

    name: 'ling',

    getName : function () {

        return this.name

    }

}

var obj2 = {

    name : 'abc'

}

console.log(obj1.getName());//ling

console.log(obj1.getName.call(obj2));//abc

巴特西

JS中this的指向问题（读书笔记纯手打~）

一、this

二、this的指向

根据运用情景可分为四类：

1.作为对象的方法调用：

2.作为普通函数调用；

3.构造器调用；

4.Function.prototype.call或Function.prototype.apply调用。

最新文章

热门文章