ES6箭头函数(二)-this绑定

原文链接

箭头函数，除了帮助我们简写之外，最大的好处就是this不再被绑定在调用者，而是继承与环境对象，在哪个环境定义，this就是指的哪个环境对象。

在编写构造函数或者函数时，this的指向经常会变化，导致this.属性无法在各个函数体面使用

案例代码：

function Counter() {
console.log('我是构造体'+this);
this.number = 0;
//返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。
this.timer = window.setTimeout(function () {
this.number++;
//此时的this的意思是window，window是没有number属性的
console.log(this.number);
},1000)
}
var b = new Counter();
console.log(b.number);
结果 0
NaN

为了解决this指向问题，我们可以使用bind来改变,不能使用call,apply

function Counter() {
this.number = 0;
var fn = function () {
this.number++
console.log(this.number);
}
// 不能用call、applay，这两种方法都是立即执行，并且不会循环执行
// var timer = window.setTimeout(fn.call(this),3000)
//var timer = window.setInterval(fn.apply(this),3000)
var timer = window.setInterval(fn.bind(this),3000)
}
var b = new Counter();
console.log(b.number);

从上可以看出，想改变this的指向非常困难

有了箭头函数之后，一切都变得简单,不在绑定this的指向了

function Counter() {
this.number = 0;
var timer = setInterval(() => {
console.log(this);
this.number++;
console.log(this.number);
},2000)
}
var b = new Counter();

原理分析：

普通函数，this的概念是：this是JavaScript的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就等于那个对象）。

函数中this对象的取值，是在函数被调用执行的时候确定的。此时会创建执行上下文环境。

对于箭头函数，它没有自己的this，不能用作构造函数。

箭头函数中的this对象是定义时所在的对象，不是调用时所在的对象。

案例1

var testObject = {
name:'123',
sayHi:function () {
console.log(this);
// return function () {
// console.log(this);
// }
//箭头函数的this,不再是谁调用就是谁，而是指当前环境的this是谁，
//一般是指父级，因为箭头函数没有this对象，都是从父级继承过来的
return ()=>{
console.log(this);
}
}
}
var hh = testObject.sayHi();
window.hh();

案例2

function foo() {
setTimeout(function() {
console.log('setTimeout普通函数的this='+this);
console.log("id: ",this.id);
}, 100);
}
function fooa() {
setTimeout(()=>{
console.log('setTimeout箭头函数的this='+this);
console.log("id: ",this.id);
}, 100);
}
var id=21;
//两个函数的结果都是一样的：window，21
//因为可以理解为都是由window调用的window.foo() 和 window.fooa()
foo(); //this指向window对象， 21
fooa(); //this指向window对象， 21
=========================================
//setTimeout(普通函数体)的this指向的调用时对象，那么这个对象如果不改变的话永远都是window.
foo.call({id:42}); //this指向window对象， 21
//setTimeout(箭头函数体)本身没有this，定义时对象，也就是哪个对象调用了，this就是哪个对象的
fooa.call({id:42}); //this指向object对象， 42

案例3-返回值是函数的，函数体里面的this指向的是window，和普通函数里面的this一样

const test = {
name: 'test object',
createAnonFunction: function() {
return function() {
//function 当做了普通函数，this的指向是window
console.log(this.name);
console.log(arguments);
};
},
createArrowFunction: function() {
return () => {
//箭头函数本身没有this对象，this是在定义是去找，本身没有的话，就会去父级寻找
//当test对象去调用方法createArrowFunction，this就获得了test对象
console.log(this.name);
console.log(arguments);
};
}
};
//结果
JavaScript 代码:
> const anon = test.createAnonFunction('hello', 'world');
> const arrow = test.createArrowFunction('hello', 'world');
> anon();
undefined
{}
> arrow();
test object
{ '0': 'hello', '1': 'world' }

案例4-函数作为参数的时候，函数体里面的this指向的是window，和普通函数里面的this一样

Array.prototype.myFind = function (index,callback) {
//this是对象数组
console.log(this)
for (var i = 0; i < this.length; i++) {
if(i === index){
callback(this[i])
}
}
}
var arr = ['hello', 'WORLD', 'Whatever'];
arr.myFind(1,function (item) {
//this是window
console.log(this);
console.log(item);
})

特殊的案例

Array.prototype.myFind = function (index, callback) {
for (var i = 0; i < this.length; i++) {
if (i === index) {
callback.call(this,this[i])
//callback(this[i])
}
}
}
var arr = ['hello', 'WORLD', 'Whatever'];
arr.myFind(1, function (item) {
//array数组
console.log(this);
})
arr.myFind(1, item => {
//window对象
console.log(this);
})

ES6箭头函数(二)-this绑定

相关文章