关于JavaScript中this的问题

viciky

本文主要是自己学习时记录的,仅供参考,如有错误可帮忙提出,谢谢。

对象方法的调用:(当一个函数作为一个对象的属性时,我们称它为方法)

var name = 'window';
var obj = {
    name: 'obj',
    //箭头函数
    sayName: () => {
        console.log(this); // window对象
        console.log(this.name);  // 'window'
    },
    // 普通函数
    getName: function(){
        console.log(this); // obj对象
        console.log(this.name); // 'obj'
    }
}
obj.sayName();
obj.getName();
var obj_1 = {name: 'obj_1'}
obj.sayName.apply(obj_1) // window对象,'window'

正常的函数调用:

// 当函数被当做函数调用时,this是绑定在window对象上面的,这是javaScript语言上设计的错误
// 在ES6的箭头函数,纠正的以上的错误,但是并没有完全纠正错误,
//【箭头函数中的this的绑定在执行上下文的整个封闭函数的this,如果没有封闭的函数将绑定到window上面】
//常见的调用
function m(){
    console.log(this); // window对象
}
m();

var n = () => {
    console.log(this); // window对象
}
n();

//对象方法中函数的this
var name = 'window';
var obj = {
    name: 'obj',
    sayName: function(){
        console.log(this); // 复习一下,此处为obj对象
        f();
        function f(){
            console.log(this); // window对象
            console.log(this.name); // 'window'
        }
        return function(){
            console.log(this); // window对象
            console.log(this.name); // 'window'
        }
     }
}
obj.sayName()();

// 用箭头函数看看this
var name = 'window';
var obj = {
    name: 'obj',
    sayName: function(){
        var f = () => {
            console.log(this); // obj对象
            console.log(this.name); // 'obj'
        }
        f();
        return () => {
            console.log(this); // obj对象
            console.log(this.name); // 'obj'
        }
     }
}
obj.sayName()();
var obj_1 = {name: 'kangkang'};
obj.sayName().apply(obj_1); //和上面输出相同

构造函数中的this:(构造函数不能使用箭头函数,所以不考虑箭头函数)

// 构造函数中的this指向新创建的对象本身
var Person = function(name){
    this.name = name;
}
Person.prototype.getName = fucntion() {
    return this.name;
}
var obj = new Person('kangkang');
obj.getName(); // kangkang

bind/call/apply 改变this的指向这里不想详细介绍

// 由于箭头函数没有自己的this,所以bind、call、apply方法对箭头函数失效
待后续完善......
阅读 762
22 声望
1 粉丝
0 条评论
你知道吗?

22 声望
1 粉丝
文章目录
宣传栏