20190725筆記-apply詳解

wzyplus 發布于2019-08-26 10:21 / 2750人閱讀

摘要：語法參數這個對象將替代類里的對象可選在函數運行時使用的值。如果該參數的值為或，則表示不需要傳入任何參數。更簡單的講就是將和傳入函數執行。

學了那么久前端，對apply、call這兩個函數的用法，還不是很掌握。
今天看了很多網上的文章，我總結和歸納下用法。

Function.prototype.apply()

apply() 方法調用一個具有給定this值的函數，以及作為一個數組（或類似數組對象）提供的參數。

語法

func.apply(thisArg, [argsArray])

參數

thisArg /// 這個對象將替代func類里的this對象
可選,在func函數運行時使用的this值。請注意，this可能不是該方法看到的實際值：如果這個函數處于非嚴格模式下，則指定為 null 或 undefined 時會自動替換為指向全局對象，原始值會被包裝。

argsArray // 數組、類數組。它將作為參數傳到func函數中
可選的。一個數組或者類數組對象，其中的數組元素將作為多帶帶的參數傳給 func 函數。如果該參數的值為 null 或 undefined，則表示不需要傳入任何參數。從ECMAScript 5 開始可以使用類數組對象。

返回值

調用有指定this值和參數的函數的結果。

示例

var array=["a","b"],
elem=[1,2,3];

array.push.apply(arry,elem);
console.log(array) // ["a","b",1,2,3]

//   定義一個Animals
    function Animals(name, kind) {
      this.name = name
      this.kind = kind
    }

    // 定義一個貓
    function Cat(name, kind, sex) {
      Animals.apply(this, arguments)
      console.log(this)  // 
      this.sex = sex
    }

    var HelloKitty = new Cat("Kitty","cat", "Female")
    console.log(HelloKitty)

最后得到的值：

這是為什么呢？

Animals.apply(this, arguments)

this
表示的是當前fn內的this，就是Cat的this

arguments
表示的是當前fn內的所傳參數，即"Kitty","cat", "Female"

當參數"Kitty","cat", "Female"傳入Cat中，函數利用apply函數執行Animals的內容，就是將this.name =name; this.kind = kind;作用于Cat函數內部。

更簡單的講就是將this和arguments傳入Person函數執行。

現在我們來做一些改變

    function Animals(name, kind) {
      this.name = name
      this.kind = kind
    }

    // 定義一個貓
    function Cat(name, sex, kind) {
      Animals.apply(this, arguments)

      this.sex = sex
    }

    var HelloKitty = new Cat("Kitty", "Female", "cat")
    console.log(HelloKitty)

我們將Cat中的sex，kind換個位置，會得到什么結果呢？

這樣就能直觀展現出這個過程

   Animals.apply(this,["Kitty", "Female"])

然后進行賦值

    this.name = "Kitty"
    this.kind = "Female"

這里的this指的是Cat對象，賦值成功后，返回Cat函數，進行下一步

    this.sex ="Female";

最后得到結果

{
    name: "Kitty", 
    kind: "Female", 
    sex: "Female"
}

GPU云服務器云服務器 apply() applied apply 中$apply

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

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

前端學習筆記之js中apply()和call()方法詳解

摘要：第二行將函數的指向一個字符串第三行將函數的指向一個數字以此類推。再舉一個例子實現對象繼承繼承了的屬性和方法陳安東男姓名年齡性別輸出姓名陳安東年齡性別男這樣用就實現了繼承用也類似這里排版不是太好，詳情看我的簡書經過網上的大量搜索，漸漸明白了apply()和call方法的使用，為此寫一篇文章記錄一下。定義 apply()方法： Function.apply(obj,args)obj：...

moven_j 2019-08-20 16:20 評論0 收藏0
Js apply()使用詳解

摘要：方法詳解我在一開始看到的函數和時非常的模糊看也看不懂最近在網上看到一些文章對方法和的一些示例總算是看的有點眉目了在這里我做如下筆記希望和大家分享如有什么不對的或者說法不明確的地方希望讀者多多提一些意見以便共同提高主要我是要解決一下幾個問題和 Js apply方法詳解我在一開始看到javascript的函數apply和call時,非常的模糊,看也看不懂,最近在網上看到一些文章對apply...

iOS122 2019-08-26 10:22 評論0 收藏0
《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

摘要：方法與代理處理程序的方法相同。使用給目標函數傳入指定的參數。當然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入參數，將返回值賦值給，這樣我們就能在需要讀取這個返回值的時候調用。這種代理模式和的代理有異曲同工之妙。反射 Reflect 當你見到一個新的API，不明白的時候，就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....

ZHAO_ 2019-08-21 16:06 評論0 收藏0
《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

摘要：方法與代理處理程序的方法相同。使用給目標函數傳入指定的參數。當然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入參數，將返回值賦值給，這樣我們就能在需要讀取這個返回值的時候調用。這種代理模式和的代理有異曲同工之妙。反射 Reflect 當你見到一個新的API，不明白的時候，就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....

shiina 2019-08-29 13:05 評論0 收藏0