所謂的隱式呼叫簡單來說就是自動呼叫一些方法,而這些方法像鉤子一樣可以在外部修改,從而改變既定行為。
下面我會列舉一些最近看到的隱式調用,例子都是點到即止,歡迎補充
var obj = { a: 1, toString: function () { console.log('toString') return '2' }, valueOf: function () { console.log('valueOf') return 3 } } console.log(obj == '2'); //依次输出 'valueOf' false console.log(String(obj));//依次输出 'toString' '2'
var obj = { a: 1, toString: function () { console.log('toString') return '2' }, valueOf: function () { console.log('valueOf') return {} //修改为对象 } } console.log(obj == '2'); //依次输出 'valueOf' 'toString' true console.log(Number(obj));//依次输出 'valueOf' 'toString' 2
在相等運算子的運算中,物件會先呼叫valueOf 如果傳回的值是一個物件, 就會呼叫toSting, null除外,然後用傳回的值進行比較,第一個例子相當於3 == '2'輸出false, 第二個例子由於執行valueOf 返回的是一個對象, 然後執行toString, 最後相當於'2' == '2' 輸出true
在Number 和String 方法中Number會先呼叫valueOf, 後調用toString, String方法中是相反的。
資料類型的轉換除了上面的兩個例子外,還存在在各種其他操作中,如數值運算,當涉及到引用類型時,都會呼叫valueOf 或toString 方法,只要是物件都會繼承這兩個方法,我們可以重新覆寫這兩個方法,從而影響資料型別轉換的行為
var eventObj = { a: 1, handleEvent: function (e) { console.log(this, e);//返回 eventObj 和 事件对象 alert(this.a) } } document.addEventListener('click', eventObj)
你沒有看錯,addEventListener 第二個參數除了函數外還可以是物件, 事件觸發後會執行物件的handleEvent方法,方法執行時的this指向eventObj, 你可以把想傳入的資料綁定在eventObj物件上
var Obj = { a: 10, toJSON: function () { return { a: 1, b: function () { }, c: NaN, d: -Infinity, e: Infinity, f: /\d/, g: new Error(), h: new Date(), i: undefined, } } } console.log(JSON.stringify(Obj)); //{"a":1,"c":null,"d":null,"e":null,"f":{},"g":{},"h":"2018-02-09T19:29:13.828Z"}
如果JSON的stringify方法傳入的物件有toJSON方法,那麼該方法執行的物件會轉為toJSON執行後傳回的物件,有一點要注意的是,如下面程式碼
var Obj1 = { a: 10, toJSON: function () { console.log(this === Obj1);//true return this } } console.log(JSON.stringify(Obj1));//{"a":10}
var Obj2 = { a: 10, toJSON: function () { console.log(this === Obj2);//true return { a: this } } } console.log(JSON.stringify(Obj2));//报错 Maximum call stack size exceeded
如果按上面的說法很明顯報錯是我們所預期的,但是當直接return this 根本沒有報錯,不妨可以大膽猜測一下其內部對toJSON返回的對象和原對象進行比較,如果相等就直接使用原對象
var obj = { then: function (resolve, reject) { setTimeout(function () { resolve(1000); }, 1000) } } Promise.resolve(obj).then(function (data) { console.log(data);// 延迟1秒左右输出 1000 })
當Promise.resolve方法傳入物件時,如果存在then 方法會立即執行then方法,相當於把方法放入new Promise中,除了Promise.resolve有這個行為外,Promise.all也有這個行為
var timePromise = function (time) { return new Promise(function (resolve) { setTimeout(function () { resolve(time); }, time) }) } var timePromise1 = timePromise(1000); var timePromise2 = timePromise(2000); var timePromise3 = timePromise(3000); Array.prototype.then = function (resolve) { setTimeout(function () { resolve(4000); }, 4000) } Promise.all([timePromise1, timePromise2, timePromise3]).then(function (time) { console.log(time);// 等待4秒左右输出 4000 })
var obj = { _age: 100, get age() { return this._age < 18 ? this._age : 18; }, set age(value) { this._age = value; console.log(`年龄设置为${value}岁`); } } obj.age = 1000; //年龄设置为1000岁 obj.age = 200; //年龄设置为200岁 console.log(obj.age);// 18 obj.age = 2; ////年龄设置为2岁 console.log(obj.age); // 2
可以看到不管把年齡設定為多少,我的年齡都是18歲或以下的,當執行屬性存取時實際上是呼叫物件屬性對應的get set函數,除了以上寫法還有下面的寫法
var input = document.createElement('input'); var span = document.createElement('span'); document.body.appendChild(input); document.body.appendChild(span); var obj = { _age:'' } var obj = Object.defineProperty(obj, 'age', { get: function () { return this._age; }, set: function (value) { this._age = value; input.value = value; span.innerHTML = value; } }); input.onkeyup = function (e) { if (e.keyCode === 37 || e.keyCode === 39) { return; } obj.age = this.value }
現在input的value值和obj.age的屬性值span的innerHTML值都綁定在一起了
var arr = [ 1, 2 , 3]; arr[Symbol.iterator] = function () { const self = this; let index = 0; return { next () { if(index < self.length) { return { value: self[index] ** self[index++], done: false } } else { return { value: undefined, done: true } } } } } console.log([...arr, 4]);//返回 [1, 4, 27, 4] for(let value of arr) { console.log(value); //依次返回 1 4 27 }
可以看到凡是呼叫擴充運算符,或是使用for...of 循環遍歷物件都會呼叫物件的遍歷器接口,像Array,String,Map,Set,TypedArray還有一些類數組物件如arguments,NodeList原生具備了遍歷器接口,而普通對象沒有部署這個接口,如果要讓對象能夠使用擴展運算符或者for ...of循環可以在物件上加入該方法,也可以在原來具備介面的物件上重寫方法,從而改變其行為。
相關推薦:
以上是javascript中的隱式呼叫詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!