js中的this

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

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

 #显式绑定,call,applyapp

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

 暴力硬绑定。this

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个thisblog

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 !
相关文章
相关标签/搜索