this是什么?this 本质是一个绑定, 在函数被调用时建立。它的指向是完全由函数被调用的调用点来决定的。function baz() { console.log(this);//因为baz函数的调用点在全局作用域,所以this指向全局变量}baz();//这里就是baz函数的调用点this 存在的意义在函数体内部指代函数当前的运行环境。从而实现干净的 API 设计和更容易的复用。this的使用top-level scope 1) In browsers, the top-level scope is the global scope. This means that within the browser var something will define a new global variable.In Node.js this is different. The top-level scope is not the global scope; var something inside a Node.js module will be local to that module. 2) 但是在Node REPL下,与浏览器的行为保持一致(timers除外) In browsers var that = this; setTimeout(function() { console.log(this);//window }, 0); Node REPL var that = this; setTimeout(function() { console.log(this);//Timeout {…} }, 0); setInterval 结果相同严格模式下 指定的this不在被封装为对象,而且如果没有指定this,则this的值为undefined sloppy mode function foo() { console.log(this); } foo.apply(“test”); //==>String {“test”}0: “t"1: “e"2: “s"3: “t"length: 4…[[PrimitiveValue]]: “test” strict mode function foo() { “use strict”; console.log(this); } foo.apply(“test”); //==>test 调用方法时没有明确对象,this指向全局对象 sloppy mode In browsers,this指向window console.log(this);//window Node REPL, this指向global console.log(this);//global strict mode In browsers,this指向window “use strict”; console.log(this);//window Node REPL, this指向global “use strict”; console.log(this);//global 匿名函数执行时当前对象是全局对象 sloppy mode In browsers, (function() { console.log(this);//window })(); Node REPL (function() { console.log(this);//global })(); strict mode In browsers, (function() { “use strict”; console.log(this);//undefined })(); Node REPL (function() { “use strict”; console.log(this);//undefined })(); 强制一个函数调用使用某个特定对象作为 this 绑定,而不在这个对象上放置一个函数引用属性 就 this 绑定的角度讲,call(..) 和 apply(..) 是完全一样的 call function foo() { console.log(this.a); } var obj = { a: 2 }; foo.call(obj); //==>2 强制函数foo()的 this 指向 objapply function foo() { console.log(this.a); } var obj = { a: 2 }; foo.apply(obj); //==>2 强制函数foo()的 this 指向 obj bind 返回一个硬编码的新函数,它使用你指定的 this 环境来调用原本的函数 function foo(something) { console.log(this.a, something); return this.a + something; } var obj = { a: 2 }; var a = 6; var bar = foo.bind(obj);//使用obj作为this环境调用foo() var b = bar(3); // 2 3 console.log(b); // 5 var test = bar.bind(window);//2 3 console.log(test(3)); // 5 传递 null 或 undefined 作为 call、apply 或 bind 的 this 绑定参数,那么这些值会被忽略掉。 sloppy mode function foo() { console.log(this); } var obj = {}; foo.call(null);//window or global foo.apply(null);//window or global var bar = foo.bind(null); console.log(bar());//window or global strict mode “use strict”; function foo() { console.log(this); } var obj = {}; foo.call(null);//null foo.apply(null);//null var bar = foo.bind(null); console.log(bar());//null new 将新构建的对象被设置为函数调用的 this 绑定 function foo(a) { console.log(this); this.a = a; } var bar = new foo(2);//构建了一个新的对象(foo {a: 2})并把这个新对象作为 foo(..) 调用的 this console.log(bar); //foo {a: 2} console.log(bar.a); // 2 arrow functions 箭头函数从封闭它的(函数或全局)作用域采用 this 绑定 function foo() { // 返回一个箭头函数 return (a) => { //箭头函数在词法上捕获 foo() 被调用时的 this(obj1) // 这里的 this 是词法上从 foo() 采用的 console.log(this.a); }; } var obj1 = { a: 2 }; var obj2 = { a: 3 }; var bar = foo.call(obj1); bar.call(obj2); //2 Refer: https://github.com/CuiFi/You-Dont-Know-JS-CN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this