Global Scope
In a browser, the global scope is the window object.
if in your code you simply have: var x = 9; You’re actually setting the property window.x to 9 (when working in a browser). You could type window.x = 9;
Local Scope
JavaScript scopes at a function level.
1234 |
function () { var x = 5;};console.log(x);
|
If you declare a variable & forget to use the var keyword, that variable is automatically made global. So this code would work:
1234 |
function () { x = 5;});console.log(x); //5
|
this
this is a variable that is automatically set for you when a function is invoked.
Depending on how a function is invoked, this is set differently:
123 |
function foo() { console.log(this); //global object};
|
1234 |
myapp = {};myapp.foo = function() { console.log(this); //points to myapp object}
|
1234 |
var link = document.getElementById("myId");link.addEventListener("click", function() { console.log(this); //points to link}, false);
|
在函数内部时，this由函数怎么调用来确定。
Simple call
简单调用，即独立函数调用。由于this没有通过call来指定，且this必须指向对象，那么默认就指向全局对象。
12345 |
function f1(){ return this;}
f1() === window; // global object
|
在严格模式下，this保持进入execution context时被设置的值。如果没有设置，那么默认是undefined。它可以被设置为任意值(包括null/undefined/1等等基础值，不会被转换成对象)。
123456 |
function f2(){; // see strict mode return this;}
f2() === undefined;
|
大专栏 [this] scope-functions">Arrow functions
在箭头函数中，this由词法/静态作用域设置（set lexically）。它被设置为包含它的execution context的this，并且不再被调用方式影响（call/apply/bind）。
1234567891011121314 |
var globalObject = this;var foo = (() => this);console.log(foo() === globalObject); // true
// Call as a method of a objectvar obj = {foo: foo};console.log(obj.foo() === globalObject); // true
// Attempt to set this using callconsole.log(foo.call(obj) === globalObject); // true
// Attempt to set this using bindfoo = foo.bind(obj);console.log(foo() === globalObject); // true
|
As an object method
当函数作为对象方法调用时，this指向该对象。
12345678 |
var o = { prop: 37, f: function() { return this.prop; }};
console.log(o.f()); // logs 37
|
this on the object’s prototype chain
原型链上的方法根对象方法一样，作为对象方法调用时this指向该对象。
构造函数
在构造函数（函数用new调用）中，this指向要被constructed的新对象。
call和apply
Function.prototype上的call和apply可以指定函数运行时的this。
1234567 |
function add(c, d){ return this.a + this.b + c + d;}
var o = {a:1, b:3};add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
|
注意，当用call和apply而传进去作为this的不是对象时，将会调用内置的ToObject操作转换成对象。所以4将会装换成new Number(4)，而null/undefined由于无法转换成对象，全局对象将作为this。
bind
ES5引进了Function.prototype.bind。f.bind(someObject)会创建新的函数（函数体和作用域与原函数一致），但this被永久绑定到someObject，不论你怎么调用。
As a DOM event handler
this自动设置为触发事件的dom元素。
参考链接
从这两套题，重新认识JS的this、作用域、闭包、对象
深入理解JS中声明提升、作用域（链）和this关键字
原文地址：https://www.cnblogs.com/liuzhongrong/p/12271935.html