今天给朋友们带来更改this指向的三种方法，以及它们的区别：



一：call用法

window.color = 'red';

document.color = 'yellow';

var s1 = {color: 'blue'};

function changeColor () {

console.log(this.color);

}

changeColor.call() //不传参数默认指向window

changeColor.call(window) //指向window

changeColor.call(document) //指向document

changeColor.call(this) //构造函数的this如果打括号调用默认指向window

changeColor.call(s1) //指向s1对象



//例二：

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);//结果wang

// Pet.apply(this,arguments);//结果wang

}

var dog = new Dog('wang');

dog.speak(); //wang



apply与call的区别：

接收的参数不同

apply()方法接收俩个参数，一个是函数运行的作用域（this），另一个是参数数组。

call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须一 一列举出来。

语法：

apply([thisObj [,argArray]]);

调用一个对象的一个方法，另一个对象替换当前对象

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

说明：

如果thisObj是null或者undefined的时候，默认指向window。

如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

call方法可以用来代替另一个对象的一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于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



//例三：实现函数珂里化

var add = function(x) {

return function(y) {

return x + y;

};

};

var increment = add(1);

var addTen = add(10);

increment(2) //3

addTen(2) //12



小总结：

Function.prototype.bind(thisArg) - - ES5



能够返回一个新函数，该新函数的主体与原函数主体一致，但当新函数被调用执行时，函数体中的this指向的是thisArg所表示的对象。



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



调用函数执行，在函数执行时将函数体中的this指向修改为thisArg所表示的对象



val1, val2, … 表示传递给调用函数的实际参数列表



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



调用函数执行，在函数执行时将函数体中的this指向修改为thisArg所表示的对象，



array|arguments 表示调用函数的参数列表，使用数组或类数组的格式



区别：

bind与call和apply的区别：

返回值的区别：

bind的返回值是一个函数，而call和apply是立即调用。

参数使用的区别：

bind与call一样是从第二个参数开始将想要传递的参数一 一写入。但call是把第二个及以后的参数作为fn方法的实参传进去，而fn1方法的实参实则是在bind中参数的基础上再往后排。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。