手寫call、apply、bind函數

gecko23 發布于2019-05-23 13:55 / 3318人閱讀

摘要：函數特點可以改變我們當前函數的指向還會讓當前函數執行題目自測思路解析執行傳入三個參數函數內部執行傳入三個參數函數內部執行

call函數

特點：

1)可以改變我們當前函數的this指向

2）還會讓當前函數執行

Function.prototype.call = function (context) {
 if (typeof this !== "function") {
    throw new TypeError(`${this} is not a function`)
  }
  context = Object(context) || window;
  context.fn = this;
  let args = [];
  for (let i = 1; i < arguments.length; i++) {
    args.push("arguments["+i+"]"); 
  }
  let r = eval("context.fn("+args+")");
  delete context.fn;
  return r;
}

題目自測

function fn1() {
  console.log(this,arguments);
  console.log(1);
  
}
function fn2() {
  console.log(this,arguments);
  console.log(2);
}
fn1.call(fn2,1,2); // fn2 [1,2] 1
fn1.call.call.call.call.call(fn2,1,2); // {number:1} [2] 2

思路解析

fn1.call(fn2,1,2)

1）call執行傳入fn2,1,2三個參數

2）call函數內部context = Object(fn2) = fn2

3）fn2.fn = fn1

4）args=["arguments[1]","arguments[2]"]=[1,2]

5）eval("context.fn("+args+")") = fn2.fn(1,2) = fn2.fn1(1,2)

fn1.call.call.call.call.call(fn2,1,2)

1）call執行傳入fn2,1,2三個參數

2）call函數內部context = Object(fn2) = fn2

3）fn2.fn = call

4）args=["arguments[1]",arguments[2]]=[1,2]

5）eval("context.fn("+args+")") = fn2.fn(1,2) = fn2.call(1,2)

6）call執行傳入1,2兩個參數

7）call函數內部context = Object(1) = Number{1}

8）Number{1}.fn = fn2

9）args=["arguments[1]"]=[1]

10）eval("context.fn("+args+")") = Number{1}.fn(2) = Number{1}.fn2(2)

注：多次調用call的時候其實是call執行的時候內部又調用了一次call，總共調用兩次

apply函數

特點：

1)可以改變我們當前函數的this指向

2）還會讓當前函數執行

Function.prototype.apply = function (context,args) {
  if (typeof this !== "function") {
     throw new TypeError(`${this} is not a function`)
   }
   context = Object(context) || window;
   context.fn = this;
   if(!args){
    return context.fn();
   }
   let r = eval("context.fn("+args+")");
   delete context.fn;
   return r;
 }

new操作符

特點

新生成了對象

鏈接到原型

綁定this

返回一個對象

/*
 *基本使用 
 */
function Animal(type) {
  this.type = type ; 
}
Animal.prototype.say = function () {
  console.log("say");
}
let tiger = new Animal("tiger");
console.log(tiger);
--------------------------------------------------------
/*
 *方法實現
 */
function mockNew(){
    let Constructor = [].shift.call(arguments);
    let obj = {}; // 新生成了對象
    obj.__proto__ = Constructor.prototype; // 鏈接到原型
    let r = Constructor.apply(obj,arguments) // 綁定`this`
    return r instance Object ");//返回一個對象
}
let tiger = mockNew(Animal,"tiger");
console.log(tiger);

bind函數

特點

綁定this指向

返回一個綁定后的函數(高階函數原理)

如果綁定的函數被new執行，當前函數的this就是當前的實例

new出來的結果可以找到原有類的原型

Function.prototype.bind = function (context) {
  if (typeof this !== "function") {
    throw new TypeError(`${this} is not a function`)
  }
  let that = this;
  let bindArgs = Array.prototype.slice.call(arguments, 1);
  function Fn() { };
  function bindFn() {
    let args = Array.prototype.slice.call(arguments);
    /*
     * 綁定`this`指向
     * 如果綁定的函數被`new`執行 ，當前函數的`this`就是當前的實例
     */
    that.apply(this instanceof bindFn ");this : context, bindArgs.concat(args)); 
  }
  /*`new`出來的結果可以找到原有類的原型*/
  Fn.prototype = that.prototype; 
  bindFn.prototype = new Fn();
  /*返回一個綁定后的函數*/
  return bindFn; 
}

GPU云服務器云服務器 JS中bind、call和apply的作 apply與call的區別 js中的call和apply apply()

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

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

如何手寫call、apply、bind？

摘要：可以改變，并且傳入參數，立刻執行，返回函數返回值手寫參數默認值并不會排除，所以重新賦值是調用的函數執行后刪除新增屬性可以改變，并且傳入參數，與不同的是，傳入的參數是數組或類數組，立刻執行，返回函數返回值手寫參數默認值并不會排除，所以重新賦值 call Function.prototype.call(this, arg1, arg2, …..)可以改變this，并且傳入參數，立刻執行，返...

VEIGHTZ 2019-08-23 16:53 評論0 收藏0
js函數this理解？手寫apply、call、bind就夠了

摘要：一是什么函數的內部屬性，引用的是函數據以執行的環境對象。函數做為節點事件調用時指向節點本身做為構造函數實力化方法時指向實例對象箭頭函數里的普通函數，由于閉包函數是執行的，所以指向箭頭函數的指向函數創建時的作用域。一、this是什么？函數的內部屬性，this引用的是函數據以執行的環境對象。也就是說函數的this會指向調用函數的執行環境。 function a(){ retur...

Cciradih 2019-08-26 10:39 評論0 收藏0
手寫call、apply、bind及相關面試題解析

摘要：我是前端我的全名是我是一個前端指向接收多個參數，第一個是返回值返回值是一個函數上下文的，不會立即執行。柯里化相關講解請移步簡版的實現就算完成了歡迎吐槽點贊它們有什么不同？怎么用？ call 接收多個參數，第一個為函數上下文也就是this，后邊參數為函數本身的參數。 let obj = { name: 一個 } ...

TwIStOy 2019-08-23 14:48 評論0 收藏0
手寫JavaScript中的bind方法

摘要：如果綁定后的函數被了，那么此時指向就發生改變。構造函數上的屬性和方法，每個實例上都有。接下來聲明一個函數，在該中獲取了第二次傳的參數，并且返回了的執行。的又等于的實例。至此，就實現了自己的方法。之前已經實現過了call，apply和new。今天順便把bind也實現下。首先： bind方法返回的是一個綁定this后的函數，并且該函數并沒有執行，需要手動去調用。(從這一點看bind函數...

AZmake 2019-08-26 13:35 評論0 收藏0
面試題里的那些各種手寫

摘要：最近準備初級前端面試，發現有很多手寫實現什么的，例如什么手寫實現，。后面以這道題為引線面試官可能會追問什么是執行上下文的判斷，的區別手寫一個函數實現斐波那契數列首先拷一個阮神在他教程里的一個寫法。最近準備初級前端面試，發現有很多手寫實現什么的，例如什么手寫實現bind，promise。手寫ajax，手寫一些算法。翻閱了很多書籍和博客。這里做一個總結改進，算是對我后面大概為期一個月找...

wh469012917 2019-08-23 16:58 評論0 收藏0