成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入bind

Vultr / 2502人閱讀

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

今天來(lái)聊聊bind 關(guān)于之前的call跟apply 查看此鏈接

我們要明確4點(diǎn)內(nèi)容

1. bind之后返回一個(gè)函數(shù)

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

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

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之后的函數(shù)做為構(gòu)造函數(shù)執(zhí)行，this是作為新的一個(gè)引用

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 作為構(gòu)造函數(shù)時(shí)候 在原型上添加屬性 實(shí)例能找到這個(gè)屬性

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)  // 小生
實(shí)現(xiàn)一個(gè)bind

遵循以上4點(diǎn)

bind之后返回一個(gè)函數(shù)

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

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

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

bind之后的函數(shù)做為構(gòu)造函數(shù)執(zhí)行，this是作為新的一個(gè)引用

Function.prototype.bind = function(context){
    let _this = this 
    let args = Array.prototype.slice.call(arguments,1)  // 保存外部函數(shù)的參數(shù)
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出來(lái)的 是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"}

作為構(gòu)造函數(shù)時(shí)候 在原型上添加屬性 實(shí)例能找到這個(gè)屬性

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

    function ConS(){}
    let fn2 = function(){
        return _this.apply(this instanceof fn2 ? this:context ,args.concat(Array.from(arguments)))   // 看看是否是new 出來(lái)的 是new的話就不改變this 
    } 
    console.log(this)
    ConS.prototype = this.prototype  // 通過(guò)第三方  new ConS().__proto__  === this.prototype  
    fn2.prototype = new ConS()   //  new fn2().__proto__ === new ConS() ---> new fn2().__proto__.__proto__ === this.prototype  從而拿到this實(shí)例上的原型屬性和方法
    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"}

大致上就是這樣了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101898.html

相關(guān)文章

  • JavaScript深入之bind的模擬實(shí)現(xiàn)

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

    FingerLiu 評(píng)論0 收藏0

  • jQuery中.live()方法的用法深入解析

    摘要：事件委托方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)的元素有效，是由于使用了事件委托綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。執(zhí)行由綁定的特殊的事件處理函數(shù)。這個(gè)事件處理函數(shù)首先檢測(cè)事件對(duì)象的來(lái)確定是不是需要繼續(xù)。 概述jQuery給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效。這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind()時(shí)，選...

    wenyiweb 評(píng)論0 收藏0

  • 深入call apply bind

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

    Alex 評(píng)論0 收藏0

  • es6箭頭函數(shù)深入學(xué)習(xí)1

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

    娣辯孩 評(píng)論0 收藏0

  • 【進(jìn)階 6-2 期】深入高階函數(shù)應(yīng)用之柯里化

    摘要：引言上一節(jié)介紹了高階函數(shù)的定義，并結(jié)合實(shí)例說(shuō)明了使用高階函數(shù)和不使用高階函數(shù)的情況。我們期望函數(shù)輸出，但是實(shí)際上調(diào)用柯里化函數(shù)時(shí)，所以調(diào)用時(shí)就已經(jīng)執(zhí)行并輸出了，而不是理想中的返回閉包函數(shù)，所以后續(xù)調(diào)用將會(huì)報(bào)錯(cuò)。引言 上一節(jié)介紹了高階函數(shù)的定義，并結(jié)合實(shí)例說(shuō)明了使用高階函數(shù)和不使用高階函數(shù)的情況。后面幾部分將結(jié)合實(shí)際應(yīng)用場(chǎng)景介紹高階函數(shù)的應(yīng)用，本節(jié)先來(lái)聊聊函數(shù)柯里化，通過(guò)介紹其定義、比較常見(jiàn)的...

    stackvoid 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<