Javascript中this绑定的应用代码案例

this应用案例一

var name="window";
var person = {
    name:"person",
    sayName:function(){
    console.log(this.name);
}
};
function sayName(){
    var sss = person.sayName;
    sss(); // 独立调用：window
    person.sayName(); // 隐式绑定：person
    （person.sayName）(); // 隐式绑定：person
（b=person.sayName）(); // 独立调用：window
}


sayName();

this应用案例二

var name = 'window'
var person1 = {
    name:'person1',
    foo1:function(){
    console.log(this.name)
},
foo2:()=>console.log(this.name),
foo3:function(){
    return function(){
    console.log(this.name)
}
},
foo4:function(){
    return ()=>{
    console.log(this.name)
}
}
}
var person2 = {name:'person2'}
person1.foo1(); // 隐式绑定：person1
person1.foo1.call(person2); // person2

person1.foo2();//箭头函数不绑定this,去外层作用域查找：window
person1.foo2.call(person2); // 箭头函数不绑定this，去外层作用域查找：window

person1.foo3(); //独立调用：window
person1.foo3.call(person2)(); // 独立调用：window
person1.foo3().call(person2); //显示绑定：person2

person1.foo4()(); // 箭头函数找外层作用域this，外层作用域的this是隐式绑定：person1
person1.foo4.call(person2)();  //箭头函数找外层作用域this，外层作用域的this是显式绑定：person2
person1.foo4().call(person2); // 箭头函数找外层作用域的this,外层作用域的this是隐式绑定：person1

this应用案例三

var name='window'
function Person(name){
    this.name = name
    this.foo1 = function(){
    console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function(){
    return function (){
        console.log(this.name)
}
},
this.foo4 = function(){
    return () => {
        console.log(this.name)
}
}
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo() //隐式绑定：person1
person.foo1.call(person2) // 显示绑定：person2

person1.foo2() // 箭头函数不绑定this，外层作用域是new绑定：person1
person1.foo2.call(person2) //箭头函数不绑定this，外层作用域是new绑定：person1

person1.foo3() //独立调用：window
person1.foo3.call(person2)() // 独立调用：window
person1.foo3().call(person2) //显示绑定：person2

person1.foo4()() // 箭头函数不绑定this，外层作用域是隐式绑定：person1
person1.foo4.call(person2)() // 箭头函数不绑定this,外层作用域是显示绑定：person2
person1.foo4().call(person2) // 箭头函数不绑定this，外层作用域是隐式绑定：person1

this应用案例四

var name = 'window'
function Person(name){
    this.name = name;
    this.obj = {
    name:'obj',
    foo1:function(){
    return function(){
        console.log(this.name)
}
},
foo2:function(){
    return ()=>{
        console.log(this.name)
}
}
}
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()() // 独立调用：window
person1.obj.foo1.call(person2)() // 独立调用：window
person1.obj.foo1().call(person2) // 显式绑定：person2

person1.obj.foo2()()  //箭头函数不绑定this，外层作用域是隐式绑定：obj
person1.obj.foo2.call(person2)() // 箭头函数不绑定this,外层作用域是显示绑定：person2
person1.obj.foo2().call(person2) // 箭头函数不绑定this，外层作用域是隐式绑定：obj

推荐阅读： Javascript种this绑定的优先级规则是什么？