Open CPPAlien opened 4 years ago
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
关键区别在:箭头函数没有自己的 this,而 function 方式有。但内部函数的 this 会被指向全局对象,而不是外部函数。所以我们可以通过使用箭头函数避免这个设计缺陷。
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
// The callback refers to the `that` variable of which
// the value is the expected object.
that.age++;
}, 1000);
}
当使用箭头函数时
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the Person object
}, 1000);
}
var a = { a: () => { console.log(this) }, b: "123", c: function() {console.log(this)}}
a.a() // Window 对象
a.c() // {b: "123", a: ƒ, c: ƒ}
call 和 apply 都是 ES3 时出现的,基本一样,唯一区别是 apply 接收一个数组作为参数,而 call 接收参数隔开的传入方式。他们第一个参数都是 this 指针。
bind ES5 引入,与 call 的区别是不会立即执行。
var obj = {name:"Niladri"};
var greeting = function(a,b,c){
return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};
greeting.call(obj, "Newtown", "KOLKATA", "WB");
greeting.apply(obj, ["Newtown", "KOLKATA", "WB"]);
// welcome Niladri to Newtown KOLKATA in WB
greeting.bind(obj)("Newtown", "KOLKATA", "WB")
greeting.bind(obj, "Newtown")("KOLKATA", "WB")
两个误解 1,this 指向函数本身。 2,this 指向包含方法的实例。
实际的 JS 的 this 是动态的,根据传入函数中的上下文决定,这个和一般的如 JAVA 语言有很大区别。JAVA 中的 this 就是指向类实例本身。
在非 strict mode 下,未指定上下文,会默认挂在全局对象上,在浏览器则会是 window,所以此时 this.topic 是 undefined。
也可以使用隐式绑定的方式,如下,我们可以说 homework 这个对象拥有了 assignment 这个函数,此时 assignment 中的 this 就可以被推断出指向 homework