对于前端程序媛(员)来说,this这个机制应用的地方是很多的,所以搞懂是必要的,不熟练使用this将遇到一些困惑,下面是一些关于this的学习心得分享,希望大家可以一起学习:
1,this并不是指向自身
首先来看一段代码
1 function foo(num) {
2 console.log("foo:" + num); //0 1 2 3 4
3 console.log(this); //window对象
4 this.count++; //记录foo被调用的次数
5 }
6 foo.count = 0; //count 属于foo的属性 并不属于window
7 var i;
8 for (i = 0; i < 10; i++) {
9 if (i < 5) {
10 foo(i);
11 }
12 }
13 console.log(foo.count) //0
很多人认为 :函数内部的this指向当前这个函数,这是错误的
对于这个例子来说,一种解决方法是使用foo标识符代替this来指向自身
1 function foo(num) {
2 console.log("foo:" + num); //0 1 2 3 4
3 console.log(this); //window对象
4 foo.count++; //记录foo被调用的次数
5 }
6 foo.count = 0; //count 属于foo的属性 并不属于window
7 var i;
8 for (i = 0; i < 10; i++) {
9 if (i < 5) {
10 foo(i);
11 }
12 }
13 console.log(foo.count) //5
另一种方法是没有规避了this使用
function foo(num) {
console.log("foo:" + num); //0 1 2 3 4
console.log(this); //window对象
this.count++; //记录foo被调用的次数
}
foo.count = 0; //count 属于foo的属性 并不属于window
var i;
for (i = 0; i < 10; i++) {
if (i < 5) {
foo.call(foo, i) //使用call() 确保this 指向函数foo
}
}
console.log(foo.count) //5
2,this指向函数作用域(并不是一直都是对的)
需要知道的一点是this在任何情况都不会指向函数的词法作用域,因为作用域是无法通过js代码访问到的,它存在于引擎内部
下面这个代码很好的说明了这个问题
function foo() {
var a = 2;
this.bar(); // this是window
}
function bar() {
console.log(this); //window
console.log(this.a); //undefined
}
foo();
this究竟是指向什么呢?this是在运行时进行绑定的,并不是在编写时绑定的,它的上下文取决于函数调用时的各种条件,this绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。
当函数调用时,会创建一个执行上下文,这个上下文会记录函数在哪里调用了,函数的调用方法,函数参数等信息,this就是该上下文的一个属性,会在函数执行的过程中用到。
3,函数在执行过程中this是如何绑定的
寻找函数的调用位置,其实有的很明显,而某些编程模式会因此函数的真正的调用位置
分析调用栈
1 function baz() {
2 //当前的调用栈是baz
3 //因此,当前的调用位置是全局作用域
4 console.log("baz");
5 bar(); //bar的调用位置
6 }
7
8 function bar() {
9 //当前的调用栈是baz->bar
10 //因此,当前的调用位置是baz
11 console.log("bar");
12 foo(); //foo的调用位置
13 }
14
15 function foo() {
16 //当前的调用栈是baz->bar->foo
17 //因此,当前的调用位置是bar
18 console.log("foo");
19 }
20 baz(); //baz的调用位置
分析调用栈是,决定了this的绑定
4,this的绑定规则
①默认绑定:独立函数调用 ,在下面的代码中,foo()是直接使用不带任何修饰符的函数引用进行调用的,因此只能使用默认绑定
1 function foo() {
2 console.log(this.a); //this指向window
3 }
4 var a = 2;
5 foo(); //2
但是在严格模式下,全局对象将无法使用默认绑定,因此this会绑定到undefined
1 function foo() {
2 'use strict'
3 console.log(this); //undefined
4 console.log(this.a); //报错
5 }
6 var a = 2;
7 foo();
但是有个微妙的非常重要的情况,虽然this的邦定规则完全取决于调用位置,但是只有foo运行在非严格模式下是默认绑定才能绑定到全局对象,但在严格模式下,于foo的调用位置无关了
1 function foo() {
2 console.log(this); //window
3 console.log(this.a); //2
4 }
5 var a = 2;
6
7 (function() {
8 'use strict'
9 console.log(this);//undefined
10 foo();
11 })()
②隐式绑定
1 function foo() {
2 console.log(this); //obj
3 console.log(this.a); //2
4 }
5 var obj = {
6 a: 2,
7 foo: foo
8 }
9 obj.foo();
当foo被调用的时候,它的落脚点确实指向obj对象,当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this邦定到这个上下文对象中,因此,调用foo()时,this被绑定到obj,因此,this.a和obj.a是一样的
③显示绑定
1 function foo() {
2 console.log(this); //obj
3 console.log(this.a); //2
4 }
5 var obj = {
6 a: 2
7 }
8 foo.call(obj)
.call(…)和apply(…)方法实现显示绑定
他们的第一个参数是一个对象,不是对象的会利用自己的包装对象转换成对象(new Number() ,new String() ,new Boolen()等),他们会把这个对象绑定到this,接着在调用函数时指定这个this,因为你可以直接指定this的绑定对象,因此我们称为显式绑定
④new绑定
1 function foo(a) {
2 this.a = a;
3 }
4 var bar = new foo(2);
5 console.log(bar.a);//2
构造函数是使用new操作时会被调用的函数。他们并不属于类,也不会实例化一个类,实际上,甚至不能说他们是一直特殊的函数类型,他们只是用new操作费调用的普通函数而已。
使用new来调用函数,会自动执行下面操作:
1,创建(或者构造一个)全新的对象
2,这个对象会被执行【原型】连接
3,这个新对象会被绑定到函数调用的this,
4,如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
上面的代码,使用new调用foo()时,我们会构造一个新的对象并把它绑定到foo()调用中的this上,new是最后一个可以影响函数调用时this邦定行为的方法,我们称之为new绑定