超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

更改this指向的方法及其區(qū)別

2019-8-21    seo達(dá)人

今天給朋友們帶來更改this指向的三種方法,以及它們的區(qū)別:



一:call用法

window.color = 'red';

document.color = 'yellow';

var s1 = {color: 'blue'};

function changeColor () {

console.log(this.color);

}

changeColor.call() //不傳參數(shù)默認(rèn)指向window

changeColor.call(window) //指向window

changeColor.call(document) //指向document

changeColor.call(this) //構(gòu)造函數(shù)的this如果打括號(hào)調(diào)用默認(rèn)指向window

changeColor.call(s1) //指向s1對(duì)象



//例二:

var Pet = {

words: '...',

speak: function (say) {

console.log(say + '' + this.words)

}

}

Pet.speak('123') //輸出123...

var Dog = {

words: 'WangWangWang'

}

Pet.speak.call(Dog,'123') //輸出123WangWangWang



二:apply用法:

window.number = 'one';

document.number = 'two';

var s1 = {number: 'three'};



function changeNum() {

console.log(this.number)

}

changeNum.apply(); //one

changeNum.apply(window); //one

changeNum.apply(document);//two

changeNum.apply(this);//one

changeNum.apply(s1);//three



//例二:

function Pet(words){

this.words = words;

this.speak = function(){

console.log(this.words)

}

}

function Dog(words){

Pet.call(this,words);//結(jié)果wang

// Pet.apply(this,arguments);//結(jié)果wang

}

var dog = new Dog('wang');

dog.speak(); //wang



apply與call的區(qū)別:

接收的參數(shù)不同

apply()方法接收倆個(gè)參數(shù),一個(gè)是函數(shù)運(yùn)行的作用域(this),另一個(gè)是參數(shù)數(shù)組。

call()方法第一個(gè)參數(shù)和apply()方法的一樣,但是傳遞給函數(shù)的參數(shù)必須一 一列舉出來。

語法:

apply([thisObj [,argArray]]);

調(diào)用一個(gè)對(duì)象的一個(gè)方法,另一個(gè)對(duì)象替換當(dāng)前對(duì)象

call([thisObj [,arg1[,arg2[…,argn]]]]);

說明:

如果thisObj是null或者undefined的時(shí)候,默認(rèn)指向window。

如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象,那么將導(dǎo)致一個(gè)TypeError,如果沒有提供argArray和thisObj任何一個(gè)參數(shù),那么Global對(duì)象將用作thisObj。

call方法可以用來代替另一個(gè)對(duì)象的一個(gè)方法,call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閠hisObj指定的新對(duì)象,如果沒有提供thisObj參數(shù),那么Global對(duì)象被用于thisObj。



三:bind的用法:

var obj = {

name: 'WuXiaoDi'

}

function printName() {

console.log(this.name)

}

var wuXiaoDi = printName.bind(obj)

console.log(wuXiaoDi) //function(){...}

wuXiaoDi() //WuXiaoDi



//例二:

function fn(a, b, c) {

console.log(a, b, c);

}

var fn1 = fn.bind(null, 'Dot');

fn('A', 'B', 'C'); //A B C

fn1('A', 'B', 'C');           // Dot A B

fn1('B', 'C');                // Dot B C

fn.call(null, 'Dot');      // Dot undefined undefined



//例三:實(shí)現(xiàn)函數(shù)珂里化

var add = function(x) {

return function(y) {

return x + y;

};

};

var increment = add(1);

var addTen = add(10);

increment(2) //3

addTen(2) //12



小總結(jié):

Function.prototype.bind(thisArg) - - ES5



能夠返回一個(gè)新函數(shù),該新函數(shù)的主體與原函數(shù)主體一致,但當(dāng)新函數(shù)被調(diào)用執(zhí)行時(shí),函數(shù)體中的this指向的是thisArg所表示的對(duì)象。



Function.prototype.call(this.Arg,val1,val2, …)



調(diào)用函數(shù)執(zhí)行,在函數(shù)執(zhí)行時(shí)將函數(shù)體中的this指向修改為thisArg所表示的對(duì)象



val1, val2, … 表示傳遞給調(diào)用函數(shù)的實(shí)際參數(shù)列表



Function.prototype.apply(thisArg, array|arguments)



調(diào)用函數(shù)執(zhí)行,在函數(shù)執(zhí)行時(shí)將函數(shù)體中的this指向修改為thisArg所表示的對(duì)象,



array|arguments 表示調(diào)用函數(shù)的參數(shù)列表,使用數(shù)組或類數(shù)組的格式



區(qū)別:

bind與call和apply的區(qū)別:

返回值的區(qū)別:

bind的返回值是一個(gè)函數(shù),而call和apply是立即調(diào)用。

參數(shù)使用的區(qū)別:

bind與call一樣是從第二個(gè)參數(shù)開始將想要傳遞的參數(shù)一 一寫入。但call是把第二個(gè)及以后的參數(shù)作為fn方法的實(shí)參傳進(jìn)去,而fn1方法的實(shí)參實(shí)則是在bind中參數(shù)的基礎(chǔ)上再往后排。

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔