# 隐式绑定,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 !