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