js中的this


# 隐式绑定,this会根据调用时候的上下文,来判断自身代表什么!

function foo() {
	console.log( this.a );
}
var obj = {
	a: 2,
	foo: foo
};
obj.foo(); // 2
var foo2 = obj.foo;
foo2();//undefined

 #显式绑定,call,apply

function foo() {
    console.log( this.a );
}
var obj = {
    a:2
};
foo.call( obj ); // 2

   读代码吧,一般函数默认回传this和arguments,

function foo(something) {
console.log( this.a, something );
    return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
    return function() {//js函数的arguments 默认回传的。
        return fn.apply( obj, arguments );
    };
}
var obj = {
    a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

 暴力硬绑定。

function foo(something) {
console.log( this.a, something );
return this.a + something;
}

var obj = {
a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

 #用New创建对象时的this

function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

#区分以下2个this

function Plane(){
	this.drive = function (){
		console.log("I am plane");
	}
}
function Car() {
	console.log(this);//这个this是Car
	let plane = new Plane();
	let vehDrive = plane.drive;
	plane.drive = function() {
		vehDrive.call(this);//函数体里的这个this代表调用者,plane,在#$%^处调用的
		console.log(
			"Rolling on all " + " wheels!"
		);
	}
	this.drive = function(){
		plane.drive();//#$%^
	}
}
var myCar= new Car();
myCar.drive();

#箭头函数是个例外,他不是调用时候的上下文,而是等效于多了一个bind函数

function foo() {
    // 返回一个箭头函数
    return (a) => {
        //this 继承自foo()
        console.log( this.a );
    };
}
var obj1 = {
    a:2
};
var obj2 = {
    a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是3 !

相关