更改this指向的方法及其区别

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

一:call用法

window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
	console.log(this.color);
}
changeColor.call()	//不传参数默认指向window 输出:red
changeColor.call(window)	//指向window 输出:red
changeColor.call(document)	//指向document 输出:yellow
changeColor.call(this)	//构造函数的this如果打括号调用默认指向window 输出:red
changeColor.call(s1)	//指向s1对象 输出:blue
//例二:
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与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中参数的基础上再往后排。

上一篇:区块链学习笔记


下一篇:bugfree3.0.1-BUG解决方案修改