javascript的call apply和new原理剖析 [手寫]
摘要：
今天公司沒那麼忙 閒來無事 就手動實現下js的call,apply和new的原理吧～
本篇不長 廢話不多 分為3步：
手寫call方法
手寫apply方法
手寫new方法
我們知道 call可以改變this指向，同時也可以傳遞引數。即 ...
今天公司沒那麼忙 閒來無事 就手動實現下js的call,apply和new的原理吧～
本篇不長 廢話不多 分為3步：
- 手寫call方法
- 手寫apply方法
- 手寫new方法
我們知道 call可以改變this指向，同時也可以傳遞引數。即 call的第一個引數為改變後的this，剩餘引數則是正常的函式引數。並且，呼叫call和apply後相當於改變this並立馬執行函式。ok，上程式碼～
let str = 'str';
let obj = {
name:'123'
};
function fn(){
console.log(this);
}
fn.call(str); // 列印 String {"str"}
fn.call(obj); // 列印 {name: "123"}
手寫call方法
注意觀看順序1,2,3,4,5...
/* Function原型上拓展call方法*/
Function.prototype.myCall = function(context){
/** 1 如果沒傳上下文conntext 就取window為this
* 此處Object() 主要考慮到如果是String型別
*/
context = context?Object(context):window;
/** 2 改變this指向
* this就是原函式 */
context.fn = this;
/** 3 取引數 注意從第二個開始取
* 因為第一個引數是上下文context 也就是this
*/
let args = [];
for(let i = 1; i < arguments.length; i++){
/** 4 這裡傳遞的上字串 因為待會要配合eval()使用 */
args.push('arguments['+ i +']');
}
/** 5 把引數傳遞進去 eval()方法可以讓字串執行 */
let r = eval('context.fn('+ args +')');
/** 6 刪除原context.fn */
delete context.fn;
/** 7 返回r */
return r;
}
let str = 'str';
let obj = {
name:'123'
};
function fn(){
console.log(this);
}
fn.myCall(str); // 列印 String {"str"}
fn.myCall(obj); // 列印 {name: "123"}
:ok_hand:. 接下來是apply方法 ，其實apply方法最簡單 因為apply和call方法的唯一區別就是apply第一個引數後面的引數是陣列形式 僅此而已。 所以 我們在call方法上進行稍微改造就好:
手寫apply方法
注意觀看順序1,2,3,4,5...
/* Function原型上拓展apply方法*/
Function.prototype.myApply = function(context,args){
/** 1 如果沒傳上下文conntext 就取window為this
* 此處Object() 主要考慮到如果是String型別
*/
context = context?Object(context):window;
/** 2 改變this指向
* this就是原函式 */
context.fn = this;
/** 3 把引數傳遞進去 eval()可以讓字串執行 */
let r = eval('context.fn('+ args +')');
/** 6 刪除原context.fn */
delete context.fn;
/** 7 返回r */
return r;
}
let str = 'str';
let obj = {
name:'123'
};
function fn(){
console.log(this);
}
fn.apply(str);// 列印 String {"str"}
fn.apply(obj); // 列印 {name: "123"}
fn.myApply(str);// 列印 String {"str"}
fn.myApply(obj); // 列印 {name: "123"}
可以看到 apply的實現方法比call簡單許多 這是因為call需要處理其他引數的情況，而apply的引數本身就是一個數組 直接傳遞進去 執行就好～
ok.call和apply我們都手動實現了，接下來就是new了～
首先是原new
function Animal(type){
this.type = type;
}
Animal.prototype.eat = function(){
console.log('eat-meat');
}
let tiger = new Animal('tiger');
console.log(tiger.type); // 列印 tiger
console.log(tiger.eat()); // 列印 eat-meat
手寫new方法
注意觀看順序1,2,3,4,5...
function myNew(){
/** 1 我們都new第一個引數為建構函式
* shift:把陣列的第一個元素從其中刪除，並返回第一個元素的值
* 此時Constructor就是建構函式
*/
let Constructor = Array.prototype.shift.call(arguments);
/** 2 將要返回的例項 */
let obj = {};
/** 3 例項obj和建構函式Constructor指向同一個原型物件 */
obj.__proto__ = Constructor.prototype;
/** 4 拿到例項執行的結果 觀察結果是不是一個引用型別
* 改變Constructor的this指向為將要返回的例項obj 並傳遞引數
* 這裡一定要用apply 不要用call 因為apply傳遞的是一個引數陣列
*/
let r = Constructor.apply(obj,arguments);
return r instanceof Constructor? r : obj;
}
function Animal(type){
this.type = type;
}
Animal.prototype.eat = function(){
console.log('eat-meat');
}
let tiger = new Animal('tiger');
let tiger1 = new myNew(Animal,'tiger');
console.log(tiger.type); // 列印 tiger
console.log(tiger.eat()); // 列印 eat-meat
console.log(tiger1.type); // 列印 tiger
console.log(tiger1.eat()); // 列印 eat-meat
好.至此 call apply和new的原理我們都手寫出來了. 其實還有一個bind方法，不過bind方法略麻煩，對於bind 我會單獨寫一篇文章.