資訊專欄INFORMATION COLUMN
摘要：前言的指向在中一直是個謎一樣的存在，但是很多地方又會用到，所以理解和使用非常重要，關于的理解這篇文章不做介紹，因為這篇的目的是改變的指向。改變的指向有三種方法，，，。
前言
this的指向在javascript中一直是個謎一樣的存在，但是很多地方又會用到this，所以理解和使用this非常重要，關于this的理解這篇文章不做介紹，因為這篇的目的是改變this的指向。
改變this的指向有三種方法，call，apply，bind。下面先介紹下這三種方法
改變this指向 callvar 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
可以看到通過call，say方法中的this指向了tn,傳參的方式的列舉
applyvar a = {
name:"aaa",
say(type){
console.log(type,this.name);
}
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])
可以看到通過apply，say方法中的this指向了tn，傳參的方式是數組
bindbind也能改變this的指向，不過和call，apply不同的地方在于，bind只改變this，不會指向函數
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
因為cat是Cat的實例，Cat是改變了this的Animal，所以cat也是Animal的實例，但是this是指向cat的，所以this.name是undefined
實現bindFunction.prototype.bind = function(obj){
const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數
const that = this;
const bound = function(){
const inArgs = Array.prototype.slice.call(arguments);//執行bind的函數時的參數
const newArgs = args.concat(inArgs);//組裝參數
that.apply(obj,newArgs);//執行bind的函數
}
//繼承prototype--寄生組合式繼承
function F(){};
F.prototype = that.prototype;
bound.prototype = new F();
return bound;
}
然后執行上面的代碼
Cat();//name:to...color:red var cat = new Cat();//name:to...color:red cat.say();//say..name:undefined...color:undefined
不過第二行和原生的bind還是有點區別的，這里還是記住了之前的bind的對象，原生的不知道為啥是undefined
面試題實現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實現，咦？？沒有出現success？？為什么？
分析一下代碼，bind的第一個參數是null??null的時候應該默認為this，修改代碼如下
Function.prototype.bind = function(obj){
const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數
const that = this;
const bound = function(){
const inArgs = Array.prototype.slice.call(arguments);//執行bind的函數時的參數
const newArgs = args.concat(inArgs);//組裝參數
const bo = obj || this;
that.apply(bo,newArgs);//執行bind的函數
}
//繼承prototype--寄生組合式繼承
function F(){};
F.prototype = that.prototype;
bound.prototype = new F();
return bound;
}
輸出success
完美~~~
撒花~~~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99783.html
摘要：一前言指向，，，的區別是一個經典的面試問題，同時在項目中會經常使用到的原生的方法。中可能會極大的避免了產生的錯誤，有時候需要維護老的項目還是有必要了解一下的指向和，，三者的區別。 一、前言 this指向，apply，call，bind的區別是一個經典的面試問題，同時在項目中會經常使用到的原生的js方法。同時也是ES5中的眾多坑的一個。ES6中可能會極大的避免了this產生的錯誤，有時候...
摘要：并根據官網文檔的語法順序，寫了對應的的語法，并附一個教程。和受限元素一樣，使用事件可以監聽值的變化。有一個初始值，但這個值用戶可以改變并會反應到界面上。 寫在前面 以前寫Vue寫慣了，心血來潮，寫起了react。并根據Vue官網文檔的語法順序，寫了對應的React的語法，并附一個教程demo。 教程的github地址：Close2React 項目使用框架版本主要有 react(15.4...
摘要：接下來，我們換一種思路，用一個相對較新的來實現方法。從這道題目看出，相比考察死記硬背，這樣的實現更有意義。對數組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們再看下社區上著名的和的實現。 有不少剛入行的同學跟我說：JavaScript 很多 API 記不清楚怎么辦？數組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開發...
閱讀 2283·2021-10-09 09:41
閱讀 1746·2019-08-30 15:53
閱讀 989·2019-08-30 15:52
閱讀 3444·2019-08-30 11:26
閱讀 768·2019-08-29 16:09
閱讀 3422·2019-08-29 13:25
閱讀 2260·2019-08-26 16:45
閱讀 1932·2019-08-26 11:51
