JavaScript中有关this的知识点整理

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

有关This的知识点：

1 为什么要使用this?

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

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并不像我们所想的那样指向函数本身！！

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代码访问!!

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

秒客网

JavaScript中有关this的知识点整理

相关文章