JavaScript中有关this的知识点整理-1--《你不知道的javascript》

读了许多有关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

 

posted @ 2017-10-21 12:06  ningGis  阅读(249)  评论(0编辑  收藏  举报