js--this指向的相关问题
丶Serendipity丶 人气:0前言
关于this的指向问题是前端面试中常考的知识点，也是我们开发学习中较难理解的问题。作为JavaScript的基础，需要我们彻底理解这一关键词。this作为JavaScript中非常复复杂的机制，值得我们付出更大的代价来学习理解。这里分享一下我的学习笔记。
正文
1.this是什么？this指向什么？
学习this之前首先要知道this永远指向一个对象，this就是函数运行时候所在的环境，我们在学习执行上下文的时候提到，每一个执行上下文都包含三个重要对象，分别是变量对象、作用域链和 this，JavaScript支持运行环境动态切换，也就是说，this的指向是动态的，并不是固定的指向一个对象，this的指向完全取绝于函数调用的位置。接下来我们看下下面的代码：
var a=1
function foo(){
var a=3
console.log(a)
}
foo()//3
上面的代码执行用到函数的作用域问题，foo()函数执行的时候，函数内部定义一个变量a等于3，然后输出打印a，此时foo上下文中存在a变量，因此输出3，若函数foo()内部没有定义a这个变量，在执行打印这句代码的时候，函数内部找不到该变量，此时会沿着作用域链向上次查找，即全局作用域，此时打印结果便为1。
var a=1
function foo(){
var a=3
console.log(this.a)
}
foo()//1
上面的代码执行结果会打印出1，对比第一段代码你会发现就这里多了this这一个关键词，为什么加了this之后输出结果会发生改变呢？莫非此时this指向window全局对象？
var a=1
function foo(){
var a=3
console.log(this.a)
}
var obj={a:100,foo:foo}
obj.foo()//100
再来看下上面的代码，打印结果变为100，对比前面两段代码，foo函数增加了obj对象的一层引用，输出的this.a结果再次发生改变？难道此时this指向obj对象？
this的指向为什么会发生改变，this的指向到底什么时候发生的？是因为函数在JavaScript中既可以当作值传递和返回，也可以当作对象和构造函数。所有函数在运行的时候才能确定其当前的运行环境，所以this就产生了，this会根据函数的运行环境的改变而改变，同时，函数中的this也只能在函数运行时最终确定其运行环境。
2.this不指向它自身。
function foo(num) {
console.log( "foo: " + num ); // 记录 foo 被调用的次数
this.count++;
}
foo.count = 0;
for (var i=0; i<5; i++) {
foo( i );
}
console.log("foo.count:"+foo.count)
//foo: 0
//foo: 1
//foo: 2
//foo: 3
//foo: 4
//foo.count:0
上面的代码打印输出foo：01234,说明foo函数被调用了五次，然后打印foo.count输出还是0，说明this.count中的this并不是指向的函数foo本身，foo.count只是函数foo的一个属性，this无法指向他本身。我们可以通过arguments.callee来引用当前正在执行的函数对象，即对象本身。
3.this不指向它的作用域。
另一种常见的误解就是this指向函数的作用域。我们需要牢记，this在任何情况下都不指向函数的词法作用域，this的指向完全取决于函数调用的位置。因此不能使用this来引用一个函数词法作用域内部的东西。
4.this的绑定规则。
通过函数调用的位置来确定函数绑定的this对象，需要遵守以下四条规则：
（1）默认绑定
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
上面的代码中，foo()函数直接调用，不带任何修饰的函数引用进行调用，因此采用默认绑定，此时this指向window对象，无法应用其他规则。在非 strict mode 下时，默认绑定才能绑定到全局对象,严格模式下 this 绑定在undefined。
（2）隐式绑定--需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。
function foo() {
console.log( this.a );
}
var obj = { a: 2, foo: foo };
obj.foo(); // 2
上面的代码中，foo函数被调用时 obj 对象 “ 拥有 ” 或者 “ 包含 ” 它。当函数引 用有上下文对象时，隐式绑定规则会把函数调用中的 this绑定到这个上下文对象，因为调 用 foo() 时 this 被绑定到 obj，因此 this.a 和 obj.a 是一样的。
function foo() {
console.log(this.a);
}
var obj2 = {
a: 2,
fn: foo
};
var obj1 = {
a: 1,
o1: obj2
};
obj1.o1.fn();//2
上面的代码需要值得注意的是：对象属性引用链中只有最顶层或者说最后一层会影响调用位置。
function foo() {
console.log( this.a );
}
var obj = { a: "local", foo: foo };
var bar = obj.foo; // 函数别名！
var a = " global"; // a 是全局对象的属性
bar(); // "global"
上面的代码，虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的 bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
function foo(){
console.log(this.a)
}
var a="global"
var obj={a:"local",foo:foo}
var bar=obj.foo
function doFnc(fn){
fn()
}
doFnc(bar)//global
上面的代码需要注意的是：被隐式绑定的函数会丢失绑定对象。
（3）显示绑定或者硬绑定--call,apply,bind直接指定this的绑定对象
call() apply() bind()直接指定 this 的绑定对象，返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。但是如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值 在调用时会被忽略，实际应用的是默认绑定规则。foo.call( obj );以在调用 foo 时强制把它的 this 绑定到 obj 上。
（4）new绑定
JavaScript 中 new 的机制实 际上和面向类的语言完全不同。
在 JavaScript 中，构造函数只是一些 使用 new 操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上， 它们甚至都不能说是一种特殊的函数类型，它们只是被 new 操作符调用的普通函数而已。包括内置对象函数（比如 Number(..)）在内的所有函数都可 以用 new 来调用，这种函数调用被称为构造函数调用。
使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。
1. 创建（或者说构造）一个全新的对象。
2. 这个新对象会被执行 [[ 原型 ]] 连接。
3. 这个新对象会绑定到函数调用的 this。
4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象
new 来调用 foo(..) 时，我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。
5.绑定的优先和一些特殊情况。
（1）间接绑定
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 = o.foo 的返回值是目标函数的引用
对比隐式绑定
function foo() { console.log( this.a ); }
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 ,fo:o.foo};
p.fo() //4 对比间接引用
（2）事件绑定中的this
1.行内绑定 <input type='button' onclick="this">
<input onclick="clickFuc"> function(){ this ...}
//this指向window对象
2.事件监听与动态绑定
<input type="button" value="按钮" id="btn">
<script> var btn = document.getElementById('btn');
btn.onclick = function(){
this ; // this指向本节点对象
}</script>
//动态绑定的事件本身就是对应节点的一个属性，重新赋值为一个匿名函数，this自然就指向了本节点对象
（3）箭头函数
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。这其实和 ES6 之前代码中的 self = this 机制一样。
总结
加载全部内容