this小记

普通函数

在箭头函数出现前js的this是不断变化的。

下面给俩段代码:

node.onclick=function(){
    console.log(this)
}

这里的this指的是node,因为es5的function里面的this是根据上下文定义的,这个调用这个function的对象是node。

简单的说,随调用的谁this就是谁

var aa = {};
aa.say = function(){console.log(this)};
aa.say(); //Object aa
let haha = aa.say;
haha(); //Window

 

箭头函数

箭头函数自己是没有this的,它的this取决于定义它的时候的上下文的this。

 

bind

bind可以让函数绑定this, 原理如下

function fn() {}

const a = {};
const fn2 = fn.bind(a);

// 等效于
const fn2 = function(...args) {
    fn.call(a, ...args)
}

因此我们看到,多重bind实际上只有第一个bind有效,因为最终调用的时候是call(第一个bind的对象, ...args)

bind对箭头函数无效。

 

this的优先级

首先,new 的方式优先级最高,接下来是 bind 这些函数,然后是 obj.foo() 这种调用方式,最后是 foo 这种调用方式,同时,箭头函数的 this 一旦被绑定,就不会再被任何方式所改变。

posted @ 2017-10-24 17:14  张啊咩  阅读(153)  评论(0编辑  收藏  举报