深入bind

Vultr 發布于2019-08-23 15:20 / 2497人閱讀

摘要：今天來聊聊關于之前的跟查看此鏈接我們要明確點內容之后返回一個函數改變并且可以傳參之后的函數仍舊可以傳參陳孫李張三李四陳孫李張三李四，之后的函數做為構造函數執行，是作為新的一個引用坤坤坤坤作為構造函數時候在原型上添加屬性實例能找到這個屬性坤坤

今天來聊聊bind 關于之前的call跟apply 查看此鏈接

我們要明確4點內容

1. bind之后返回一個函數

let obj = {
    name : "skr"
}
function fn(){
    console.log(this)
}
let bindfn = fn.bind(obj)
console.log(typeof bindfn) // function

2.bind改變this 并且可以傳參 bind之后的函數仍舊可以傳參

let obj = {
    name : "skr"
}
function fn(){
    console.log(arguments,this)
}
let bindfn = fn.bind(obj,"陳","孫","李")

bindfn("張三李四")  //[Arguments] { "0": "陳", "1": "孫", "2": "李", "3": "張三李四" }，{ name: "skr" }

3.bind之后的函數做為構造函數執行，this是作為新的一個引用

let obj = {
    name : "skr"
}
function fn(name){
    this.name = name 
    console.log(this)  //{ name: "坤坤" }
    console.log(obj) //{ name: "skr" }
}
let bindfn = fn.bind(obj)

let obj2 = new bindfn("坤坤")

4 作為構造函數時候在原型上添加屬性實例能找到這個屬性

let obj = {
    name : "skr"
}
function fn(name){
    this.name = name 
    console.log(this)  //{ name: "坤坤" }
    console.log(obj) //{ name: "skr" }
}
let bindfn = fn.bind(obj)

let obj2 = new bindfn("坤坤")  

fn.prototype.arrt = "小生"
console.log(obj2.arrt)  // 小生

實現一個bind

遵循以上4點

bind之后返回一個函數

Function.prototype.bind = function(){
    return function(){
        // 代碼省略
    }
}

bind改變this 并且可以傳參 bind之后的函數仍舊可以傳參

Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函數的參數
    return function(){
        return _this.apply(context,args.concat(Array.from(arguments)))  // 鏈接內部函數參數
    }
}
let obj = {
    name :"1"
}
function a(){
    console.log(this,arguments)
}
a.bind(obj,1,2,3,4,5,6)(7,8,9) 
/*
打印結果：
{ name: "1" } [Arguments] {
  "0": 1,
  "1": 2,
  "2": 3,
  "3": 4,
  "4": 5,
  "5": 6,
  "6": 7,
  "7": 8,
  "8": 9 } */

bind之后的函數做為構造函數執行，this是作為新的一個引用

Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函數的參數
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出來的 是new的話就不改變this 
    }   
    return fn2
}
let obj = {
    name :"1"
}
function a(name){
    this.name = name 
    console.log(this)
}
let bindfn = a.bind(obj) 
let obj2 = new bindfn("2")  // {name:"2"}
console.log(obj) // {name:"1"}

作為構造函數時候在原型上添加屬性實例能找到這個屬性

Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函數的參數

    function ConS(){}
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出來的 是new的話就不改變this 
    } 
    console.log(this)
    ConS.prototype = this.prototype  // 通過第三方  new ConS().__proto__  === this.prototype  
    fn2.prototype = new ConS()   //  new fn2().__proto__ === new ConS() ---> new fn2().__proto__.__proto__ === this.prototype  從而拿到this實例上的原型屬性和方法
    return fn2
}
let obj = {
    name :"1"
}
function a(name){
    this.name = name 
    console.log(this)
}
let bindfn = a.bind(obj) 
let obj2 = new bindfn("2")  // {name:"2"}
console.log(obj2) // {name:"1"}

大致上就是這樣了

云服務器 GPU云服務器 bind() bindings Binding bind

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

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

JavaScript深入之bind的模擬實現

摘要：也就是說當返回的函數作為構造函數的時候，時指定的值會失效，但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數的。 JavaScript深入系列第十一篇，通過bind函數的模擬實現，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數...

FingerLiu 2019-08-20 16:15 評論0 收藏0
jQuery中.live()方法的用法深入解析

摘要：事件委托方法能對一個還沒有添加進的元素有效，是由于使用了事件委托綁定在祖先元素上的事件處理函數可以對在后代上觸發的事件作出回應。執行由綁定的特殊的事件處理函數。這個事件處理函數首先檢測事件對象的來確定是不是需要繼續。概述jQuery給所有匹配的元素附加一個事件處理函數，即使這個元素是以后再添加進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind()時，選...

wenyiweb 2019-08-19 17:59 評論0 收藏0
深入call apply bind

摘要：眾所周知，這三個函數都是改變執行上下文的，那么我們來捋一捋，這些函數內部到底做了什么。前言稍微翻了一下call，apply， bind 的各種論壇上的文章，發現講的都太淺了，大部分都只講了個用法，對于實現的原理卻都沒有提，因此，在這里，我寫下這篇文章，希望能讓大家認識到原理所在。眾所周知，這三個函數都是改變執行上下文的，那么我們來捋一捋，這些函數內部到底做了什么。 c...

Alex 2019-08-23 15:18 評論0 收藏0
es6箭頭函數深入學習1

摘要：基本用法允許使用箭頭定義函數。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數綁定，很大程度上解決了這個困擾。函數綁定箭頭函數可以綁定對象，大大減少了顯式綁定對象的寫法。基本用法ES6允許使用箭頭（=>）定義函數。 var f = v => v;上面的箭頭函數等同于： var f = function(v) { return v;};如果箭頭函數不需要參數...

娣辯孩 2019-08-23 14:21 評論0 收藏0
【進階 6-2 期】深入高階函數應用之柯里化

摘要：引言上一節介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出，但是實際上調用柯里化函數時，所以調用時就已經執行并輸出了，而不是理想中的返回閉包函數，所以后續調用將會報錯。引言上一節介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用，本節先來聊聊函數柯里化，通過介紹其定義、比較常見的...

stackvoid 2019-05-22 19:25 評論0 收藏0