this

• demo

var people = {
    Name: "a",
    getName : function(){
        console.log(this.Name);
    }
};
var bar = people.getName;

bar();

var people = {
    Name: "a",
    getName : function(){
        console.log(this.Name);
    }
};
people.getName();

• 1 默認綁定

var name = 'b';
var a = {
    name: 'a',
    getName: function() {
        console.log(this.name);
    }
}
var obj = a.getName;
obj(); // ?

• 2 隱性綁定

var name = 'b';
var a = {
    name: 'a',
    getName: function() {
        console.log(this.name);
    }
}
var obj = a.getName();
obj; // ?

• 3 強制綁定

• call apply bind 區(qū)別

• call從第二個參數(shù)開始所有的參數(shù)都是 原函數(shù)的參數(shù)。
• apply只接受兩個參數(shù)，且第二個參數(shù)必須是數(shù)組，這個數(shù)組代表原函數(shù)的參數(shù)列表。
• bind只有一個函數(shù)，且不會立刻執(zhí)行，只是將一個值綁定到函數(shù)的this上,并將綁定好的函數(shù)返回。

var name = 'b';
var a = {
    name: 'a',
    getName: function() {
        console.log(this.name);
    }
}
a.getName.call(this);

var name = 'b';
var a = {
    name: 'a',
    getName: function() {
        console.log(this.name);
    }
}
var func = a.getName.bind(this);
func();

• 4 New綁定

• 創(chuàng)建一個新對象。

• 把這個新對象的proto屬性指向原函數(shù)的prototype屬性。(即繼承原函數(shù)的原型)

• 將這個新對象綁定到 此函數(shù)的this上 。

• 如果這個函數(shù)沒有返回其他對象，返回新對象。

var name = 'b';
function func() {
    this.name = 'a';
    console.log(this.name);
}
var obj = new func();
obj; // ?

• 5 箭頭函數(shù)

• 在定義時綁定this

• this無法修改

var name = 'b';
var people = {
    name: "a",
    getName : function() {
        return () => {
            console.log(this.name);
        }
    }
};
var bar = people.getName();

bar();

• demo

function foo(arg){
    this.a = arg;
    return this
};

var a = foo(1);
var b = foo(2);

console.log(a.a);    // ?
console.log(b.a);    // ?

var x = 1;
var obj = {
    x: 2,
    f: function(){ console.log(this.x); }
};
var bar = obj.f;
var obj2 = {
    x: 3,
    f: obj.f
}
obj.f();
bar();
obj2.f();

function obj() {
    getName = function () { console.log (1); };
    return this;
}
obj.getName = function () { console.log(2);};
obj.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName () { console.log(5);}
 
obj.getName ();                // ?
getName ();                    // ?
obj().getName ();              // ?
getName ();                    // ?
new obj.getName ();            // ?
new obj().getName ();          // ?
new new obj().getName ();      // ?