06.Javascript——入門this的用法(難點)

this 的指向

this 是 js 中定義的關鍵字，它自動定義於每個函數域內，可是它的指向卻讓人很迷惑。在實際應用中，this 的指向大體能夠分爲如下四種狀況。

1.做爲普通函數調用

當函數做爲一個普通函數被調用，this 指向全局對象。在瀏覽器裏，全局對象就是 window。

window.name = 'linxin';
function getName(){
    console.log(this.name);
}
getName();                   // linxin

能夠看出，此時 this 指向了全局對象 window。 在ECMAScript5的嚴格模式下，這種狀況 this 已經被規定不會指向全局對象了，而是 undefined。

'use strict';
function fun(){
    console.log(this);
}
fun();   

2.做爲對象的方法調用

當函數做爲一個對象裏的方法被調用，this 指向該對象

var obj = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

若是把對象的方法賦值給一個變量，再調用這個變量：

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

此時調用 fun2 方法 輸出了 window 對象，說明此時 this 指向了全局對象。給 fun2 賦值，實際上是至關於：

var fun2 = function(){
    console.log(this);
}

能夠看出，此時的 this 已經跟 obj 沒有任何關係了。這時 fun2 是做爲普通函數調用。

3.做爲構造函數調用

js中沒有類，可是能夠從構造器中建立對象，並提供了 new 運算符來進行調用該構造器。構造器的外表跟普通函數同樣，大部分的函數均可以當作構造器使用。當構造函數被調用時，this 指向了該構造函數實例化出來的對象。

var Person = function(){
    this.name = 'linxin';
}
var obj = new Person();
console.log(obj.name);      // linxin

若是構造函數顯式的返回一個對象，那麼 this 則會指向該對象。

var Person = function(){
    this.name = 'linxin';
    return {
        name : 'linshuai'
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

若是該函數不用 new 調用，看成普通函數執行，那麼 this 依然指向全局對象。

4.call() 或 apply() 調用

經過調用函數的 call() 或 apply() 方法可動態的改變 this 的指向。

var obj1 = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : 'linshuai'
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

apply 和 call 的區別

ECMAScript 規範給全部函數都定義了 call 與 apply 兩個方法，它們的應用很是普遍，它們的做用也是如出一轍，只是傳參的形式有區別而已。

apply( )

apply 方法傳入兩個參數：一個是做爲函數上下文的對象，另一個是做爲函數參數所組成的數組。

var obj = {
    name : 'linxin'
}

function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.apply(obj, ['A', 'B']);    // A linxin B

能夠看到，obj 是做爲函數上下文的對象，函數 func 中 this 指向了 obj 這個對象。參數 A 和 B 是放在數組中傳入 func 函數，分別對應 func 參數的列表元素。

call( )

call 方法第一個參數也是做爲函數上下文的對象，可是後面傳入的是一個參數列表，而不是單個數組。

var obj = {
    name: 'linxin'
}

function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.call(obj, 'C', 'D');       // C linxin D

對比 apply 咱們能夠看到區別，C 和 D 是做爲單獨的參數傳給 func 函數，而不是放到數組中。

對於何時該用什麼方法，其實不用糾結。若是你的參數原本就存在一個數組中，那天然就用 apply，若是參數比較散亂相互之間沒什麼關聯，就用 call。

apply 和 call 的用法

1.改變 this 指向

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

func.call(obj);       // linxin

咱們知道，call 方法的第一個參數是做爲函數上下文的對象，這裏把 obj 做爲參數傳給了 func，此時函數裏的 this 便指向了 obj 對象。此處 func 函數裏其實至關於

 

 

function func() {
    console.log(obj.name);
}

2.借用別的對象的方法

var Person1  = function () {
    this.name = 'linxin';
}
var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);
}
var person = new Person2();
person.getname();       // linxin

從上面咱們看到，Person2 實例化出來的對象 person 經過 getname 方法拿到了 Person1 中的 name。由於在 Person2 中，Person1.call(this) 的做用就是使用 Person1 對象代替 this 對象，那麼 Person2 就有了 Person1 中的全部屬性和方法了，至關於 Person2 繼承了 Person1 的屬性和方法。

3.調用函數

apply、call 方法都會使函數當即執行，所以它們也能夠用來調用函數。

 

function func() {
    console.log('linxin');
}
func.call();            // linxin

call 和 bind 的區別

在 EcmaScript5 中擴展了叫 bind 的方法，在低版本的 IE 中不兼容。它和 call 很類似，接受的參數有兩部分，第一個參數是是做爲函數上下文的對象，第二部分參數是個列表，能夠接受多個參數。
它們之間的區別有如下兩點。

1.bind 發返回值是函數

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

var func1 = func.bind(obj);
func1();                        // linxin

bind 方法不會當即執行，而是返回一個改變了上下文 this 後的函數。而原函數 func 中的 this 並無被改變，依舊指向全局對象 window。

 

2.參數的使用

 

 

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');

func('A', 'B', 'C');            // A B C
func1('A', 'B', 'C');           // linxin A B
func1('B', 'C');                // linxin B C
func.call(null, 'linxin');      // linxin undefined undefined

call 是把第二個及之後的參數做爲 func 方法的實參傳進去，而 func1 方法的實參實則是在 bind 中參數的基礎上再日後排。

在低版本瀏覽器沒有 bind 方法，咱們也能夠本身實現一個。

 

 

if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            var self = this,                        // 保存原函數
                context = [].shift.call(arguments), // 保存須要綁定的this上下文
                args = [].slice.call(arguments);    // 剩餘的參數轉爲數組
            return function () {                    // 返回一個新函數
                self.apply(context,[].concat.call(args, [].slice.call(arguments)));
            }
        }
    }