徹底掌握this,apply,call

liangzai_cool 發布于2019-08-20 12:27 / 2734人閱讀

摘要：說起里面比較頭疼的知識點的指向與的理解這三者肯定算的上前幾好的開發者這是必須邁過的檻今天就總結下這三者緊密相連的關系首先推薦理解的用法格式，，，的傳參個數不限第一個數表示調用函數函數體內的指向從第二個參數開始依次按序傳入函數表示函數指向表示

說起js里面比較頭疼的知識點,this的指向,call與apply的理解這三者肯定算的上前幾,好的js開發者這是必須邁過的檻.今天就總結下這三者緊密相連的關系.

首先推薦理解call的用法

Function.prototype.call

格式:fx.call( thisArg [，arg1，arg2，… ] );

call的傳參個數不限,第一個數表示調用函數(fx)函數體內this的指向.從第二個參數開始依次按序傳入函數.

var age = 40;
var xiaoMing = {
    age:30
};
var xiaoLi = {
    age: 20
};
var getAge = function(){
    console.log(this.age);
};
 getAge.call( xiaoMing );  //30 表示函數this指向xiaoMing
getAge.call(xiaoLi);  //20  表示函數this指向xiaoLi
getAge.call(undefined);//40  getAge.call(undefined)==getAge.call(null)
getAge.call(null);//40
getAge(); //40

如果我們傳入fx.call()的第一個參數數為null,那么表示函數fx體內this指向宿主對象,在瀏覽器是Window對象,這也解釋了getAge.call(undefined);//40。

**在此基礎我們可以理解為 getAge()相當于getAge.call(null/undefined),擴展到所有函數,
fx()==fx.call(null) == fx.call(undefined)
**

值得注意的是嚴格模式下有點區別: this指向null

var getAge = function(){
    "use strict"
    console.log(this.age);
};

getAge(null);//報錯 age未定義

再來理解this的使用

this的常用場景:

this位于一個對象的方法內,此時this指向該對象

var name = "window";

var Student = {
    name : "kobe",
    getName: function () {
        console.log(this == Student); //true
        console.log(this.name);  //kobe
    }
}

Student.getName();

this位于一個普通的函數內,表示this指向全局對象,(瀏覽器是window)

var name = "window";

var getName = function () {
    var name = "kobe";  //迷惑性而已
    return this.name;
}

console.log(  getName() ); //window

this使用在構造函數(構造器)里面,表示this指向的是那個返回的對象.

var name = "window";
//構造器
var Student = function () {
    this.name = "student";
}

var s1 = new Student();
console.log(s1.name);  //student

注意: 如果構造器返回的也是一個Object的對象(其他類型this指向不變遵循之前那個規律),這時候this指的是返回的這個Objec.

var name = "window";
//構造器
var Student = function () {
    this.name = "student";
    return {
        name: "boyStudent"
    }
}

var s1 = new Student();
console.log(s1.name);  //boyStudent

this指向失效問題

var name = "window";

var Student = {
    name : "kobe",
    getName: function () {        
        console.log(this.name);  
    }
}

Student.getName(); // kobe
var s1 = Student.getName;
s1(); //window

原因: 此時s1是一個函數

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

對一個基本的函數,前面提過this在基本函數中指的是window.

在開發中我們經常使用的this緩存法 ,緩存當前作用域下this到另外一個環境域下使用

最后理解apply的用法 Function.prototype.apply

格式: fx.apply(thisArg [，argArray] ); // 參數數組，argArray

apply與call的作用是一樣的,只是傳參方式不同,

apply接受兩個參數,第一個也是fx函數體內this的指向,用法與call第一個參數一致.第二個參數是數組或者類數組,apply就是把這個數組元素傳入函數fx.


var add = function (a ,b ,c) {
    console.log(a +b +c);
}

add.apply(null , [1,2,3]); // 6

再吃透這個題目就ok

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      return this.a;
    }
}
foo.bar()
//20
(foo.bar)()
//20
(foo.bar=foo.bar)()
//10
(foo.bar,foo.bar)()
//10

哪里說錯或者有更好的理解希望大家指出來.共同進步.

云服務器 GPU云服務器 apply與call的區別 js中的call和apply JS中bind、call和apply的作 apply()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80989.html

JavaScript之例題中徹底理解this

摘要：最后重點理解結論箭頭函數的，總是指向定義時所在的對象，而不是運行時所在的對象。輸出，箭頭函數不會綁定所以傳入指向無效。原因是，要徹底理解應該是建立在已經大致理解了中的執行上下文，作用域作用域鏈，閉包，變量對象，函數執行過程的基礎上。本文共 2025 字，看完只需 8 分鐘概述前面的文章講解了 JavaScript 中的執行上下文，作用域，變量對象，this 的相關原理，但是我...

Hwg 2019-08-23 12:34 評論0 收藏0
JS高級講解面向對象，原型，繼承，閉包，正則表達式，讓你徹底愛上前端（進階二）

摘要：通過構造函數得到的實例對象內部會包含一個指向構造函數的對象的指針。 JavaScript 高級學習目標: 理解面向對象開發思想掌握 JavaScript 面向對象開發相關模式掌握在 JavaScript 中使用正則表達式面向對象介紹程序中面向對象的基本體現在 JavaScript 中，所有數據類型都可以視為對象，當然也可以自定義對象。自定義的對象數據類型就是面向對象中...

Nino 2019-08-23 14:58 評論0 收藏0
JS高級講解面向對象，原型，繼承，閉包，正則表達式，讓你徹底愛上前端（進階二）

摘要：通過構造函數得到的實例對象內部會包含一個指向構造函數的對象的指針。 JavaScript 高級學習目標: 理解面向對象開發思想掌握 JavaScript 面向對象開發相關模式掌握在 JavaScript 中使用正則表達式面向對象介紹程序中面向對象的基本體現在 JavaScript 中，所有數據類型都可以視為對象，當然也可以自定義對象。自定義的對象數據類型就是面向對象中...

source 2019-07-01 11:16 評論0 收藏0
js 面試官想了解你有多理解call,apply,bind?

摘要：返回值這段在下方應用中有詳細的示例解析。回調函數丟失的解決方案綁定回調函數的指向這是典型的應用場景綁定指向，用做回調函數。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當重要的概念，與 this...

wuaiqiu 2019-08-26 10:33 評論0 收藏0