1. 构造函数调用

new S() ==>this指向创建的对象本身 {a:'a'}

2. 方法调用 method,property

var p = {
    s:function(){
        console.log(this)
    }
}

  p.s() ==> this指向调用方

3. apply、call的调用

p.s.call({a:2},1,2,3)
p.s.apply({a:2},[1,2,3])

4. 函数调用

var cache = p.s;
cache()==> this指向全局对象
p.s() ==> this指向P

笔记：

一般情况：看知乎 https://zhuanlan.zhihu.com/p/23804247

JS里有三种函数调用形式:

 function(p1,p2);//可以转换成     function.call(undefined,p1,p2);   
 obj.child.method(p1,p2);//obj.child.method.call(obj.child,p1,p2);
 func.call(content,p1,p2);

this就是上面的content

Event Hanlder

https://zhuanlan.zhihu.com/p/25991271

$("ul li").on("click",fucnction xxx(){
   console.log(this);
})

1、看源码

当浏览器发现用户点击了li，xxx.call(li,event);

2、看MDN文档

通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。

当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

3、可以不用this

有些情况下，this=e.target

4、用bind强行指定this

    $("ul li").on("click",fucnction xxx(){
        console.log(this);
    }.bind({name:yyy;}))

this:{name:yyy}
拆代码：

function xxx(){
   console.log(this);
}
var foo=xxx.bind({name:yyy});
$("ul li").on("click",foo);

bind
如果调用xxx.call(({name:yyy});，xxx里的this=({name:yyy}，而bind就是保证xxx.call(({name:yyy});一定被调用

function xxx(){
   console.log(this);
}
function foo(){
   xxx.call(({name:yyy});
}//与bind的效果相同
$("ul li").on("click",foo);

bind会返回一个新的函数，就是把原来的函数call一下，调用指定的this

  var foo=xxx.bind({name:yyy});

typeof foo==='function'
巩固

Paste_Image.png

不管指定xxx2为什么，this 的值是{name:"zzz"}
就算指定为window，但不会传入到xxx2里，

xxx.call();返回值类型不确定，取决于xxx，指定的同时马上被调用，得到一个返回值
xxx.bind();返回一个新的函数，明确的函数，函数并没有被调用，等着被调用