成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

深入bind

Vultr / 2544人閱讀

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

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

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

1. bind之后返回一個函數(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是作為新的一個引用

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í)例能找到這個屬性

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)一個bind

遵循以上4點(diǎn)

bind之后返回一個函數(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是作為新的一個引用

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 出來的 是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í)例能找到這個屬性

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 出來的 是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實(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101898.html

相關(guān)文章

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

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

    FingerLiu 評論0 收藏0

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

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

    wenyiweb 評論0 收藏0

  • 深入call apply bind

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

    Alex 評論0 收藏0

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

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

    娣辯孩 評論0 收藏0

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

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

    stackvoid 評論0 收藏0

發(fā)表評論

0條評論

Vultr

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<