成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Brief introduction of how to 'Call, Apply and

incredible / 802人閱讀

摘要:關(guān)于在絕大多數(shù)情況下,函數(shù)的調(diào)用方式?jīng)Q定了的值。不能在執(zhí)行期間被賦值,并且在每次函數(shù)被調(diào)用時的值也可能會不同。它們除了參數(shù)略有不同,其功能完全一樣。它們的第一個參數(shù)都為將要指向的對象。

關(guān)于 this

在絕大多數(shù)情況下,函數(shù)的調(diào)用方式?jīng)Q定了this的值。this不能在執(zhí)行期間被賦值,并且在每次函數(shù)被調(diào)用時this的值也可能會不同。

全局 this
window.something = "I love JavaScript"
console.log(this.something) // "I love JavaScript"
console.log(window === this) // true
調(diào)用全局 function
var a = 1
function test() { console.log(this.a) }
test() // 1 - still remains the window reference
調(diào)用對象中的 function
this.a = "I am in the global scope"
function Test() {
  this.a = "I am in the test scope"
  this.show = function() { console.log(this.a) }
}
Test.prototype.display = function () { console.log(this.a) }
var test = new Test() // updated the scope of this
test.show() // I am in the test scope
test.display() // I am in the test scope 
關(guān)于 call / apply

JavaScript 內(nèi)部提供了一種機(jī)制,讓我們可以自行手動設(shè)置 this 的指向。它們就是 call 與 apply。所有的函數(shù)都具有著兩個方法。它們除了參數(shù)略有不同,其功能完全一樣。它們的第一個參數(shù)都為 this 將要指向的對象。

一個最簡單的繼承
function Laptop(name, storage) {
  this.name = name
  this.storage = storage
}

function Dell(name, storage, company) {
  Laptop.call(this, "Dell", 1024)
  this.company = company
}

console.log(new Dell("Dell", 1024, "Dell Inc").storage)
改變 this
var obj = {
  entry: "mammals-banana-tower",
  duration: 0
}

function breed(name) {
  console.log("Show this breeding info", name, this.entry, this.duration)
  console.log(this === obj)
}

breed() // this => window
breed.call(obj, "Frank") // this => obj

注:當(dāng)沒有傳遞任何參數(shù)作為 call() 的第一個參數(shù)時,在非嚴(yán)格模式下,this 會指向 window。

實現(xiàn)一個簡單的 call
var _call = function (that) {
  that = that ? Object(that) : window
  that.func = this

  function formatArgs(oArgs, sign) {
    var _args
    for (var i = 1, len = oArgs.length; i < len; i++) {
      _args.push(sign ? ("_param_" + i) : oArgs[i])
    }
    return _args
  }

  var args = formatArgs(arguments)
  var newFunc = (new Function("args", "return that.func(" + formatArgs(args, true).toString() + ")"))(args)

  that.func = null
  return newFunc
}
關(guān)于 bind () => {} 和 bind this

用過 React 的同學(xué)都知道,當(dāng)使用 class component 時,需要在 constructor 綁定當(dāng)前的成員函數(shù),或者針對事件委托的情況下,也需要進(jìn)行綁定;ES6 箭頭函數(shù)可以讓我們更專注于具體的實現(xiàn)邏輯,簡化了 this 操作

// ES5
// 
// constructor() { this.handleClick = this.handleClick.bind(this) }

// ES6
//  handleClick()}>
// handleClick = () => {}
無效的 re-bound
var f = function() { console.log(this.text) }
f = f.bind({ text: "I was bound" }).bind({ text: "I won"t be bound" })
f() // I was bound

很容易發(fā)現(xiàn),f.bind() 返回的綁定函數(shù)對象僅在創(chuàng)建是保留當(dāng)前的上下文(或者傳入的參數(shù)),因此無法在第二次進(jìn)行重綁定。

一個相對完善的 bind
var _bind = function (that) {

  var fBound,
    target = this,
    slice = Array.prototype.slice,
    toStr = Object.prototype.toString,
    args = slice.call(arguments, 1); // except that

  if (typeof target !== "function" || toStr.call(target) !== "[object Function]") {
    throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }

  var binder = function () {
    var oArgs = args.concat(slice.call(arguments))
    if (this instanceof fBound) {
      var result = target.apply(this, oArgs);
      return Object(result) === result ? result : this;
    } else {
      return target.apply(that, oArgs);
    }
  };

  var i = 0,
    params = [],
    paramLength = Math.max(0, target.length - args.length);

  for (; i < paramLength; i++) {
    params.push("_param_" + i);
  }

  fBound = (new Function(
    "binder",
    "return function(" + params.join(",") + ") { return binder.apply(this,arguments); }"
  ))(binder);

  // maintain the reference of prototype
  if (target.prototype) {
    var fNOP = function () { };
    fNOP.prototype = target.prototype;
    fBound.prototype = new fNOP();
    fNOP.prototype = null;
  }

  return fBound;
};
參考

https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://www.ecma-internationa...
https://javascript.info/bind
https://juejin.im/post/5c0605...
https://github.com/mqyqingfen...

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/101985.html

相關(guān)文章

  • A Brief Introduce of Database Index(索引簡介)

    摘要:所以這篇文章希望幫助大家理解一下。我沒有在算法上展開太多,因為很多算法相似,如果展開容易喧賓奪主。等過段時間我會加入一些實驗數(shù)據(jù)和代碼進(jìn)這篇文章,最近比較懶不想安裝數(shù)據(jù)庫安裝實在太煩了。 這是我寫的一篇研究生申請的writing sample,關(guān)于數(shù)據(jù)庫索引的,對關(guān)系型數(shù)據(jù)庫的索引從數(shù)據(jù)結(jié)構(gòu)到用途再到作用對象簡單分析了一下,因為我發(fā)現(xiàn)在實際工作中,index是個好東西,但是很多DBA并...

    marek 評論0 收藏0
  • 《You Don&#039;t Know JS》閱讀理解——this

    摘要:運行規(guī)則根據(jù)的運作原理,我們可以看到,的值和調(diào)用棧通過哪些函數(shù)的調(diào)用運行到調(diào)用當(dāng)前函數(shù)的過程以及如何被調(diào)用有關(guān)。 1. this的誕生 假設(shè)我們有一個speak函數(shù),通過this的運行機(jī)制,當(dāng)使用不同的方法調(diào)用它時,我們可以靈活的輸出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

    tianren124 評論0 收藏0
  • the deadline of JavaScript&#039;s this

    摘要:在用處千千萬,基于自己研究和認(rèn)識,今天做一個了斷??梢匀∷鶎賹ο蟮纳舷挛牡姆椒ǚQ為公共方法,可以使屬性,方法變成公開的屬性方法在構(gòu)造函數(shù),方法中用到。內(nèi)部函數(shù)調(diào)用的時候,只能搜索到其活動對象為止,不可能直接訪問外部函數(shù)中的變量。 this this在JavaScript用處千千萬,基于自己研究和認(rèn)識,今天做一個了斷。 全局,匿名函數(shù)調(diào)用 對象方法調(diào)用 閉包總指向上一級 構(gòu)造函數(shù)中,指...

    chinafgj 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<