JavaScript中有关this的知识点整理

时间:2022-11-17 15:03:53

读了许多有关javascript 中this的讲解的博客外加部分书籍,虽当时感觉醍醐灌顶茅塞顿开,但当自己真正项目实际操作时总会出现许多问题。知识点的支离破碎说明自己还是没有真正懂得this。所以还需要自己把有关this的知识点亲自整理下,拿来与学习后期再创造。接下来的内容是阅读《你不知道的JavaScript》上卷感觉需要认真反复消化的东西的整理。

有关This的知识点:

1 为什么要使用this?

   this可以在不同的上下文对象中重复使用某个函数,避免了针对每个对象编写函数;优雅的隐式传递对象引用,使API设计更加简洁易复用

JavaScript中有关this的知识点整理JavaScript中有关this的知识点整理
function say(){
console.log(
'hello '+ this.name);
}
var Lily={
name:
'Lily'
}
var Bob={
name:
'Bob'
}
say.call(Lily);
// hello Lily 在Lily上下文对象中调用
say.call(Bob); // hello Bob 在Bob上下文对象中调用

function say(context){ //显式传入上下文对象
console.log('hello '+ context.name);
}
var Lily={
name:
'Lily'
}
var Bob={
name:
'Bob'
}
say(Lily);
say(Bob);
View Code

2 有关this的误解:

 2.1 “this指向函数自身”-----this并不像我们所想的那样指向函数本身!! 

JavaScript中有关this的知识点整理JavaScript中有关this的知识点整理
function fun(num){
console.log(
'fun: '+num);
//记录函数被调用次数
this.count++;
}
fun.count
=0;
var i;
for (i=0; i<5; i++) {
fun( i );
}
console.log(
"fun.count ",fun.count);

// fun: 0
//
fun: 1
//
fun: 2
//
fun: 3
//
fun: 4
//
fun.count 0
View Code

 执行fun.count=0时的确是向fun添加了属性count,但是函数内部代码this.count中的this并不指向函数对象,虽然属性名称相同但是根对象是不同的。 运行this.count代码其实是向window全局变量中添加了window.count的属性默认值为undefined; 而this.count++中的“++”操作是window.count++结果为NaN值。

 2.2“this指向函数的词法作用域”------this在任何情况下都不指向函数的作用域!!

  JavaScript的作用域作为一种特殊对象 只能通过JavaScript引擎来访问,无法通过JavaScript代码访问!!

JavaScript中有关this的知识点整理JavaScript中有关this的知识点整理
function foo(){
var a2=2;
this.bar();
}
function bar(){
console.log(
this.a2); // a 未定义
}
foo();
View Code

通过使用this来联通foo() 和bar()的词法作用域让bar()可以访问foo()内部的变量a2是行不通的。this无法访问作用域内部的信息,只有js引擎可以访问。

3 总结:

this既不指向函数自身也不指向函数的词法作用域。

this的值取决于函数在哪里被调用!!

http://www.cnblogs.com/icestin/p/7704049.html