你不知道的JavaScript this笔记

第一章关于this 为什么要用this this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将api 设计得更加简洁并且易于复用。 this 是什么 this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。

第二章 this全面解析 函数调用位置决定 this的绑定

默认绑定
独立函数调用 this 指向全局对象 window 严格模式无法使用默认绑定 this 会绑定到undefined；

function foo() {
      _"use strict";_
      console.log( this.a );
     }
var a = 2;
foo(); // TypeError: this is undefined

function foo() { 
   console.log( this.a );
}
var a = 2;
(function(){
      "use strict";
         foo(); // 2
 })();
//只有 foo() 运行在非 strict mode 下时，默认绑定才能绑定到全局对象

隐式绑定 当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

function foo() {
  console.log( this.a );
}
var obj2 = { 
    a: 42,
    foo: foo 
};
var obj1 = {
     a: 2,
    obj2: obj2 
};
obj1.obj2.foo(); // 42

隐式丢失被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或者undefined上取决于是否是严格模式

function foo() { 
console.log( this.a );
}
function doFoo(fn) {
// fn 其实引用的是 foo
 fn(); // <-- 调用位置!
}
var obj = { a: 2,foo: foo };
var a = "oops, global"; // a 是全局对象的属性
 doFoo( obj.foo ); // "oops, global"

回调函数丢失this绑定是非常常见的

显式绑定

function foo() { 
  console.log( this.a );
}
 var obj = {a:2};
 foo.call( obj ); // 2
//显式绑定仍然无法解决丢失绑定问题。

硬绑定 创建一个包裹函数，传入所有的参数并返回接收到的所有值

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

ES5 中提供了内置的方法 Function.prototype.bind。

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

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数

new 绑定 使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建(或者说构造)一个全新的对象。
这个新对象会被执行[[原型]]连接。
这个新对象会绑定到函数调用的this。

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function create() {
// 创建一个空的对象
var obj = new Object(),
// 获得构造函数，arguments中去除第一个参数
Con = [].shift.call(arguments);
// 链接到原型，obj 可以访问到构造函数原型中的属性
obj.__proto__ = Con.prototype;
// 绑定 this 实现继承，obj 可以访问到构造函数中的属性
var ret = Con.apply(obj, arguments);
// 优先返回构造函数返回的对象
return ret instanceof Object ? ret : obj;
};

优先级 new 绑定 > 显式绑定>隐式绑定> 默认绑定

类外情况 被忽略的this

function foo() { 
  console.log( this.a );
}
var a = 2;
foo.call( null ); // 2
//如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值
在调用时会被忽略，实际应用的是默认绑定规则
//使用 null 来忽略 this 绑定可能产生一些副作用

function foo(a,b) {
   console.log( "a:" + a + ", b:" + b );
}
// 我们的 DMZ 空对象
var ø = Object.create( null ); 
// 把数组展开成参数
  foo.apply( ø, [2, 3] ); // a:2, b:3
// 使用 bind(..) 进行柯里化 
var bar = foo.bind( ø, 2 ); 
bar( 3 ); // a:2, b:3

间接引用

function foo() { 
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo }; 
var p = { a: 4 };
     o.foo(); // 3
(p.foo = o.foo)(); // 2
p.foo();//4

软绑定

if (!Function.prototype.softBind) { Function.prototype.softBind = function(obj) {
    var fn = this;
    // 捕获所有 curried 参数
    var curried = [].slice.call( arguments, 1 ); 
     var bound = function() {
     return fn.apply((!this || this === (window ||global)) ? obj : this 
        curried.concat.apply( curried, arguments ));
     };
        bound.prototype = Object.create( fn.prototype );
   return bound; 
};
}

function foo() {
  console.log("name: " + this.name);
}
var obj = { name: "obj" },
 obj2 = { name: "obj2" }, 
 obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj );
     fooOBJ(); // name: obj
obj2.foo = foo.softBind(obj); 
obj2.foo(); // name: obj2 
fooOBJ.call( obj3 ); // name: obj3
setTimeout( obj2.foo, 10 ); // name: obj

箭头函数 根据外层（函数或者全局）作用域来决定this

//es5 
function foo() {
 var self = this;  
  setTimeout(function(){
             console.log( self.a );
         }, 100 );
}
//es6 
function foo() { 
  setTimeout(() => {
// 这里的 this 在此法上继承自 foo()
             console.log( this.a );
         },100);
}

箭头函数特点 没有 arguments对象没有原型没有construct 方法不能new this 不能修改，锁定外层作用域

sailei1 / blog

你不知道的JavaScript this笔记 #69