摘要:關于在絕大多數情況下,函數的調用方式決定了的值。不能在執行期間被賦值,并且在每次函數被調用時的值也可能會不同。它們除了參數略有不同,其功能完全一樣。它們的第一個參數都為將要指向的對象。
關于 this
在絕大多數情況下,函數的調用方式決定了this的值。this不能在執行期間被賦值,并且在每次函數被調用時this的值也可能會不同。
全局 thiswindow.something = "I love JavaScript" console.log(this.something) // "I love JavaScript" console.log(window === this) // true調用全局 function
var a = 1 function test() { console.log(this.a) } test() // 1 - still remains the window reference調用對象中的 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關于 call / apply
JavaScript 內部提供了一種機制,讓我們可以自行手動設置 this 的指向。它們就是 call 與 apply。所有的函數都具有著兩個方法。它們除了參數略有不同,其功能完全一樣。它們的第一個參數都為 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
注:當沒有傳遞任何參數作為 call() 的第一個參數時,在非嚴格模式下,this 會指向 window。
實現一個簡單的 callvar _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 }關于 bind () => {} 和 bind this
用過 React 的同學都知道,當使用 class component 時,需要在 constructor 綁定當前的成員函數,或者針對事件委托的情況下,也需要進行綁定;ES6 箭頭函數可以讓我們更專注于具體的實現邏輯,簡化了 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.bind() 返回的綁定函數對象僅在創建是保留當前的上下文(或者傳入的參數),因此無法在第二次進行重綁定。
一個相對完善的 bindvar _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...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101985.html
摘要:所以這篇文章希望幫助大家理解一下。我沒有在算法上展開太多,因為很多算法相似,如果展開容易喧賓奪主。等過段時間我會加入一些實驗數據和代碼進這篇文章,最近比較懶不想安裝數據庫安裝實在太煩了。 這是我寫的一篇研究生申請的writing sample,關于數據庫索引的,對關系型數據庫的索引從數據結構到用途再到作用對象簡單分析了一下,因為我發現在實際工作中,index是個好東西,但是很多DBA并...
摘要:運行規則根據的運作原理,我們可以看到,的值和調用棧通過哪些函數的調用運行到調用當前函數的過程以及如何被調用有關。 1. this的誕生 假設我們有一個speak函數,通過this的運行機制,當使用不同的方法調用它時,我們可以靈活的輸出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...
摘要:在用處千千萬,基于自己研究和認識,今天做一個了斷。可以取所屬對象的上下文的方法稱為公共方法,可以使屬性,方法變成公開的屬性方法在構造函數,方法中用到。內部函數調用的時候,只能搜索到其活動對象為止,不可能直接訪問外部函數中的變量。 this this在JavaScript用處千千萬,基于自己研究和認識,今天做一個了斷。 全局,匿名函數調用 對象方法調用 閉包總指向上一級 構造函數中,指...
閱讀 1767·2023-04-26 01:41
閱讀 3073·2021-11-23 09:51
閱讀 2733·2021-10-09 09:43
閱讀 9019·2021-09-22 15:13
閱讀 2452·2021-09-07 09:59
閱讀 2624·2019-08-30 15:44
閱讀 1132·2019-08-30 12:45
閱讀 2616·2019-08-30 12:43