亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

手動(dòng)實(shí)現(xiàn)es5中的bind方法

williamwen1986 / 573人閱讀

摘要：前言的指向在中一直是個(gè)謎一樣的存在，但是很多地方又會(huì)用到，所以理解和使用非常重要，關(guān)于的理解這篇文章不做介紹，因?yàn)檫@篇的目的是改變的指向。改變的指向有三種方法，，，。

前言

this的指向在javascript中一直是個(gè)謎一樣的存在，但是很多地方又會(huì)用到this，所以理解和使用this非常重要，關(guān)于this的理解這篇文章不做介紹，因?yàn)檫@篇的目的是改變this的指向。

改變this的指向有三種方法，call，apply，bind。下面先介紹下這三種方法

改變this指向 call 
var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
a.say("at");//at aaa
var tn = {name:"ttt"};
a.say.call(tn,"tt")//tt ttt

可以看到通過(guò)call，say方法中的this指向了tn,傳參的方式的列舉

apply 
var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])

可以看到通過(guò)apply，say方法中的this指向了tn，傳參的方式是數(shù)組

bind

bind也能改變this的指向，不過(guò)和call，apply不同的地方在于，bind只改變this，不會(huì)指向函數(shù)

var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
var tn = {name:"ttt"};
var b = a.say.bind(tn);
b();//ttt

bind 改變this,也是能夠繼承原型鏈的，看下下面的代碼

var to = {name:"to",color:"red"};
function Animal(){
    console.log(`name:${this.name}...color:${this.color}`);
}
Animal.prototype.say = function(){
    console.log(`say..name:${this.name}...color:${this.color}`);
}
var Cat = Animal.bind(to);
Cat();//name:to...color:red
var cat = new Cat();// name:undefined...color:undefined
cat.say();//say..name:undefined...color:undefined

因?yàn)閏at是Cat的實(shí)例，Cat是改變了this的Animal，所以cat也是Animal的實(shí)例，但是this是指向cat的，所以this.name是undefined

實(shí)現(xiàn)bind 
Function.prototype.bind = function(obj){
    const args = Array.prototype.slice.call(arguments,1);//保留bind時(shí)的參數(shù)
    const that = this;
    const bound =  function(){
        const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時(shí)的參數(shù)
        const newArgs = args.concat(inArgs);//組裝參數(shù)
        that.apply(obj,newArgs);//執(zhí)行bind的函數(shù)
    }
    //繼承prototype--寄生組合式繼承
    function F(){};
    F.prototype = that.prototype;
    bound.prototype = new F();
    return bound;
}

然后執(zhí)行上面的代碼

Cat();//name:to...color:red
var cat = new Cat();//name:to...color:red
cat.say();//say..name:undefined...color:undefined

不過(guò)第二行和原生的bind還是有點(diǎn)區(qū)別的，這里還是記住了之前的bind的對(duì)象，原生的不知道為啥是undefined

面試題

實(shí)現(xiàn)es5中的bind方法，使得下面的代碼輸出success

function Animal(name,color){
    this.name = name;
    this.color = color;
}
Animal.prototype.say = function(){
    return `i am a ${this.color} ${this.name}`
}
const Cat = Animal.bind(null,"cat");
const cat = new Cat("white");
if(cat.say() === "i am a white cat" && cat instanceof Cat && cat instanceof Animal){
    console.log("success")
}

加上上面的bind實(shí)現(xiàn)，咦？？沒(méi)有出現(xiàn)success？？為什么？
分析一下代碼，bind的第一個(gè)參數(shù)是null??null的時(shí)候應(yīng)該默認(rèn)為this，修改代碼如下

Function.prototype.bind = function(obj){
    const args = Array.prototype.slice.call(arguments,1);//保留bind時(shí)的參數(shù)
    const that = this;
    const bound =  function(){
        const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時(shí)的參數(shù)
        const newArgs = args.concat(inArgs);//組裝參數(shù)
        const bo = obj || this;
        that.apply(bo,newArgs);//執(zhí)行bind的函數(shù)
    }
    //繼承prototype--寄生組合式繼承
    function F(){};
    F.prototype = that.prototype;
    bound.prototype = new F();
    return bound;
}

輸出success
完美~~~
撒花~~~

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

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

相關(guān)文章

  • javascript系列--this指向和apply，call，bind三者的區(qū)別

    摘要：一前言指向，，，的區(qū)別是一個(gè)經(jīng)典的面試問(wèn)題，同時(shí)在項(xiàng)目中會(huì)經(jīng)常使用到的原生的方法。中可能會(huì)極大的避免了產(chǎn)生的錯(cuò)誤，有時(shí)候需要維護(hù)老的項(xiàng)目還是有必要了解一下的指向和，，三者的區(qū)別。 一、前言 this指向，apply，call，bind的區(qū)別是一個(gè)經(jīng)典的面試問(wèn)題，同時(shí)在項(xiàng)目中會(huì)經(jīng)常使用到的原生的js方法。同時(shí)也是ES5中的眾多坑的一個(gè)。ES6中可能會(huì)極大的避免了this產(chǎn)生的錯(cuò)誤，有時(shí)候...

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

  • 一段人人都應(yīng)該知道的從Vue到React的過(guò)渡史

    摘要：并根據(jù)官網(wǎng)文檔的語(yǔ)法順序，寫(xiě)了對(duì)應(yīng)的的語(yǔ)法，并附一個(gè)教程。和受限元素一樣，使用事件可以監(jiān)聽(tīng)值的變化。有一個(gè)初始值，但這個(gè)值用戶可以改變并會(huì)反應(yīng)到界面上。 寫(xiě)在前面 以前寫(xiě)Vue寫(xiě)慣了，心血來(lái)潮，寫(xiě)起了react。并根據(jù)Vue官網(wǎng)文檔的語(yǔ)法順序，寫(xiě)了對(duì)應(yīng)的React的語(yǔ)法，并附一個(gè)教程demo。 教程的github地址：Close2React 項(xiàng)目使用框架版本主要有 react(15.4...

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

  • JS之函數(shù)(1)

    摘要：前言這段時(shí)間突然發(fā)現(xiàn)原生好多東西都忘記了但有些東西確實(shí)很重要所以又重新再梳理一次。 showImg(https://segmentfault.com/img/bVbqqkr?w=874&h=382); 前言 這段時(shí)間突然發(fā)現(xiàn)JS原生好多東西都忘記了,但有些東西確實(shí)很重要,所以又重新再梳理一次。主要有函數(shù)的3種定義方法，ES5函數(shù)this指向，call與appl用法,JS常見(jiàn)的4種設(shè)計(jì)模...

    宋華 評(píng)論0 收藏0

  • 我們不背誦 API，只實(shí)現(xiàn) API

    摘要：接下來(lái)，我們換一種思路，用一個(gè)相對(duì)較新的來(lái)實(shí)現(xiàn)方法。從這道題目看出，相比考察死記硬背，這樣的實(shí)現(xiàn)更有意義。對(duì)數(shù)組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們?cè)倏聪律鐓^(qū)上著名的和的實(shí)現(xiàn)。 有不少剛?cè)胄械耐瑢W(xué)跟我說(shuō)：JavaScript 很多 API 記不清楚怎么辦？數(shù)組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開(kāi)發(fā)...

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

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

0條評(píng)論

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