原生JS重寫Function.prototype.bind( )方法

阿新 • • 發佈：2021-02-08

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
< 
body>
  <script>
    Function.prototype.myBind = function (context) {
      // fn.bind(obj) fn必須為函式，否則會報錯
      if (typeof this !== "function") {
        throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
      }

      var self = this 
; // 這裡的this是呼叫bind（）方法的函式（fn），儲存給 self
      var args = Array.prototype.slice.call(arguments, 1); // 獲取 myBind函式 從第二個引數到最後一個引數
      var fNOP = function () {}; // 使用聖盃模式來繼承時的中間函式

      var fbound = function () {
        // 當作為建構函式時，this 指向例項，self 指向繫結函式，因為下面一句 `fbound.prototype = this.prototype;`，已經修改了 fbound.prototype 為 繫結函式的 prototype，此時結果為 true，當結果為 true 的時候，this 指向例項。 

        // 當作為普通函式時，this 指向 window，self 指向繫結函式，此時結果為 false，當結果為 false 的時候，this 指向繫結的 context。

        self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
        // 上面的 arguments 是 fbound函式（返回的新函式） 的實參
      }

      fNOP.prototype = self.prototype;
      fbound.prototype = new fNOP();

      return fbound;
    }

    // 測試重寫後的效果
    var value = 2;

    var foo = {
        value: 1
    };

    function bar(name, age) {
        this.habit = 'shopping';
        console.log(this.value);
        console.log(name);
        console.log(age);
    }

    bar.prototype.friend = 'kevin';

    var bindFoo = bar.bind(foo, 'daisy');

    var obj = new bindFoo('18');
    // undefined
    // daisy
    // 18
    console.log(obj.habit); // shopping
    console.log(obj.friend); // kevin
    console.log(obj);
    
    

  </script>
</body>
</html>

在這裡插入圖片描述
本文學習連結

原生JS重寫Function.prototype.bind( )方法

技術標籤：JS面試JavaScriptjsjavascriptbind <!DOCTYPE html> <html lang="en">

重寫Function.prototype.call（）方法

技術標籤：JavaScriptJS面試javascriptjs <!DOCTYPE html> <html lang="en"> <head>

原生js實現addClass,removeClass,hasClass方法

function addClass(obj, cls){ var obj_class = obj.className,//獲取 class 內容. blank = (obj_class != \'\') ? \' \' : \'\';//判斷獲取到的 class 是否為空, 如果不為空在前面加個\'空格\'.

用原生js實現jquery的一些方法

1.顯示/隱藏 1 2 3 4 5 6 7 8 9 10 //hide() Object.prototype.hide = function(){ this.style.display=\"none\";

【浮點問題】重寫Number.prototype.toFixed()方法

浮點的問題造成的(計算機準確的儲存浮點) 重寫Number.prototype.toFixed()方法解決四捨六入五看雙的類似 2.445.toFixed(2)=2.44 的問題

原生js實現檔案上傳、下載、封裝等例項方法

一、下載 1、程式碼 const fileDownloadClick = (obj) => { // 解決相容 if( document.all ){

JS中call,apply和bind方法的區別和使用場景

一、call，apply和bind方法的來歷在js中所有的函式都是Function的例項，而且對於Function來說，它的原型即Function.prototype中含有很多東西，其中call,apply和bind方法就是Function原型中的方法，所以根據原型的規

模擬實現js的bind方法

目錄bind是什麼進一步理解bind根據上面的兩個例子，模擬實現一個簡單版的bindFn但是函式是可以使用new來例項化的。所以相當於在new呼叫時，bind的返回值函式bound內部要實現new的操作總結

js原生拖拽的兩種方法

一.mousedown、mousemove和mouseup 拖著目標元素在頁面任意位置如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。

C++中使用function和bind繫結類成員函式的方法詳解

定義一個普通的類 class Test1{ public: void fun(int val){ cout<<\"hello world \"<<val<<endl;

js中函式的apply和call還有bind方法

技術標籤：jsjavascript apply和call apply和call這兩個方法的作用一樣，都是控制函式呼叫上下文即函式體內this值的能力，也就是切換所呼叫的函式的上下文。程式碼如下：

原生js模擬實現bind,call,apply

技術標籤：前端SYWjavascriptbindcallapply 使用原生JavaScript模擬實現：bind call apply 。

【JavaScript】原生js中函式傳不定參以及獲取非行間樣式的方法

技術標籤：JS例項jsjavascript 函式返回值函式返回值：就是函式的執行結果 function abc(){

重寫bind()方法

技術標籤：javascriptjs Function.prototype.myBind = function(ctx){ var ctx = ctx ? Object(ctx) : window,

原生js如何實現call,apply以及bind

1、實現call 步驟：將函式設為物件的屬性；指定this到函式，並傳入給定引數執行函式；

利用原生JS實現懶載入lazyLoad的三種方法總結

目錄前言Method 1: 高度對比Method 2: 使用getBoundingClientRect() 的APIMethod 3: 採用最新的 IntersectionObserver 建構函式總結前言

js中的call()、apply()、bind()方法詳解

　這三個方法都有一個共同的功能：改變this的指向，那麼又是怎麼改變的呢？接下來我們依次來分析這三個方法

簡易模擬JS的Function物件的call和apply方法

對 call 方法的簡易模擬 1 Function.prototype._call = function(ctx) { 2// 將函式自身設定為 ctx 物件的屬性

使用JS簡單實現一下apply、call和bind方法

使用JS簡單實現一下apply、call和bind方法 1.方法介紹 apply、call和bind都是系統提供給我們的內建方法，每個函式都可以使用這三種方法，是因為apply、call和bind都實現在了Function的原型上（Function.prototype）

js通過prototype擴充套件方法

// 清除兩邊的空格 String.prototype.trim = function() { return this.replace(/(^\\s*)|(\\s*$)/g, \'\');

原生JS重寫Function.prototype.bind( )方法

相關推薦