你不知道的javaScript笔记(2)
this和对象原型
this是一个很特别的关键字，被自动定义在所有函数的作用域中
// foo.count 是0，字面理解是错误的
function foo(num) { console.log("foo:"+ num); this.count++; } foo.count = 0; var i; for(i=0;i<10;i++){ if(i>5){ foo(i) } } console.log(foo.count) //0
// 使用词法作用域解决问题
function foo(num) { console.log("foo:"+ num); data.count++; } var data = { count:0 }; var i; for(i=0;i<10;i++){ if(i>5){ foo(i) } } console.log(data.count); // 4
// 用foo标识符来替代this来引用函数对象,回避了this 的问题，完全依赖于变量foo的词法作用域。
function foo(num) { console.log("foo:"+ num); foo.count++; } foo.count = 0 var i; for(i=0;i<10;i++){ if(i>5){ foo(i) } } console.log(foo.count) //4
//强制this 指向foo函数对象
function foo(num) { console.log("foo:"+num); this.count++ } foo.count = 0; var i; for(i=0; i< 10; i++){ if(i>5){ foo.call(foo,i); } } console.log(foo.count) //4
this是在运行是 绑定的，并不是在编写时绑定的，它的上下文取决于函数调用时的各种条件，this的绑定和和函数声明的位置没有任何关系，只取决于函数调用的方式。
this全面解析
调用栈与调用位置
function baz(){ //当前调用栈是：baz // 因此，当前的调用中位置是全局作用域 console.log("baz"); bar(); // <--bar的调用位置 } function bar(){ //当前的调用栈是： baz-> bar // 因此，当前调用位置在baz console.log("bar); foo(); // <-- foo 的调用位置 } function foo(){ //当前的调用栈是： baz-> bar->foo // 因此，当前调用位置在bar console.log("foo"); } baz(); // <-- baz 的调用位置
只有运行在非strict mode 下，默认绑定才能绑定到全局对象。
对象属性引用链中只有最顶层或者说最后一层灰影响调用位置。
function foo() { console.log(this.a); } var obj2 = { a: 42, foo:foo }; var obj1 = { a:2, obj2: obj2 }; obj1.obj2.foo(); // 42
硬绑定的典型应用场景就是创建一个包裹函数，传入所有的函数并返回接收到的所有的值。
function foo(something){ console.log(this.a,something); return this.a + something; }; var obj = { a:2 }; var bar = function() { return foo.apply(obj,arguments); }; var b = bar(3) ; // 2 3 console.log(b) // 5
另一种方法是创建一个i可以重复使用的辅助函数
function foo(something){ console.log(this.a, something); return this.a + something; } // 简单的辅助绑定函数 function bind(fn,obj){ return function(){ return fn.apply(obj,arguments); }; } var obj = { a:2 } var bar = bind(foo,obj); var b = bar(3); // 2 3 console.log(b) // 5
ES5 中提供了内置的方法 Function.prototype.bind, bind(..) 会返回一个硬编码的新函数，它会
把参数设置为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); // 3 5 console.log(b) // 5
API 调用的 上下文
function foo(el){ console.log(el,this.id); } var obj = { id: "awesome' } // 调用 foo(..)时把this 绑定到obj [1,2,3].forEach(foo,obj); // 1 awesome 2 awesome 3 awesome
new可以影响函数调用时this 绑定行为的方法。
function foo(a){ this.a = a; } var bar = new foo(2); console.log(bar.a); // 2
判断this
1.函数是否在new 中调用（new 绑定）？ 如果是的话this 绑定的是新创建的对象。
var bar = new foo();
2.函数是否通过call , apply (显示绑定) 或者硬绑定调用？ 如果是的话，this的绑定时指定的对象。
va bar = foo.call(obj2)
3.函数是否在某个上下文对象中调用(隐式绑定) ？ 如果是的话，this 的绑定时在那个上下文。
var bar = obj1.foo()
4.如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined,否则绑定到全局对象上。
var bar = foo();
软绑定
function foo(){ console.log("name:" + this.name); } var obj = {name: "obj"}, obj2 = {name: "obj2"}, obj3 = {name: "obj3"}, obj3 = {name: "obj3"}; var foo0BJ = foo.softBind(obj); foo0BJ(); // name:obj obj2.foo = foo.softBind(obj); obj2.foo(); // name:obj3 <--看！ setTimeout(obj2.foo,10); // name:obj <--- 应用了软绑定
