javascript中this的意义

javascript中function的this详细说明:
在function中的this是指function的调用者,通过如下例子简要说明:
一、基本
function doSomething(){
       alert(this.id);
}
alert(window.doSomething);//证明了doSomething是属于window的
doSomething();//undefined
window.onload = function(){
      document.getElementById("div2").onclick = doSomething;//div2
      document.getElementById("div3").onclick = function(){doSomething();}//undefined
}

1、doSomething()的所有者是window,如果通过doSomething();方法调用,以上的this,指的是window对象,this.id是指window的id,因此
this.id是获取全局变量id的值

2、html中调用:
<div id="div1" οnclick="doSomething();">div1</div>
这句相当于
document.getElementById("div1").onclick = function(){ doSomething(); }
当点击div1时,调用属于window的doSomething函数,所以也是显示“undefined”;

3、通过js来绑定事件,在div2载入过后:
document.getElementById("div2").onclick = doSomething;
当点击div2时,显示“div2”,因为在给div2的onclick赋值,是将doSomething拷贝了一次,这时拷贝的这个函数是属于div2的了,
跟属于window的doSomething没有任何关系了。点击div2时,就会触发属于div2的doSomething,这里的this就是指div2。

4、如下相当于定义了一个全局变量color和全局方法sayColor()
 function ClassA(sColor){
  this.color = sColor;
  this.sayColor = function(){
   alert(this.color);
  }
 }
 ClassA("red");
 sayColor(); //弹出red
 alert(color); //弹出red;

二、对象冒充的原理
通过对象冒充方法实现及继承
function ClassA(color){
 this.color = color;
 this.sayHello = function(){
  alert(this.color);
 }
}

function ClassB(bColor, bName){
 this.newMethod = ClassA;
 this.newMethod(bColor);
 
 delete this.newMethod;

 this.name = bName;
 this.sayName = function(){
  alert(this.name);
 }
}

var objB = new ClassB("red","Tom");
objB.sayHello();
objB是ClassB的一个实例,objB是如何拥有clor属性和sayHello方法的呢?
从实例化的代码看:
var objB = new ClassB("red","Tom");
这里ClassB是类,ClassB中的this指的是objB这个实例,在ClassB中前三行用到ClassA,这是的ClassA是一个函数,不是类。
我们如果直接调用函数ClassA,很显然,ClassA的this就是window对象,所以我们先将ClassA拷贝到objB的newMethod属性中,
然后再调用this.newMethod(bColor),这时,这个的所有者已经变成了this,而ClassB中的this指当前的实例对象objB。
所以此时ClassA中(严格的说是newMethod中,因为这是拷贝过后的,跟ClassA已经是两个方法了)的this就是指的objB。
这样在通过newMethod的调用,就给objB赋值了color属性和sayColor方法。用call和apply方法来实现继承实际上也是一个原理,
call和apply可以看作是改变方法的owner的方法,而这里ClassB中的前三句代码也就是起这个作用的。

三、分析如下code

function OuterFoo(){
    this.Name = 'Outer Name';

    function InnerFoo(){
         var Name = 'Inner Name';
         alert(Name + ', ' + this.Name);
     }
  return InnerFoo;
}
OuterFoo()();
所显示的结果是“Inner Name, Outer Name”
OuterFoo是一个函数(而不是类),那么第一句 this.Name = 'Outer Name'; 中的this指的是window对象,
所以OuterFoo()过后window.Name = ‘Outer Name'; 并且将InnerFoo返回,此时InnerFoo同样是一个函数(不是类),
执行InnerFoo的时候,this同样指window,所以InnerFoo中的this.Name的值为”Outer Name”(window.Name充当了一个中转站的角色,
让OuterFoo能够向InnerFoo传递“Outer Name”这个值),而Name的值即为局部变量”Inner Name”


注意:
怎样在一个代码环境中快速的找到this所指的对象呢?我想要注意以下三个方面:
1、 要清楚的知道对于函数的每一步操作是拷贝还是引用(调用)
2、 要清楚的知道函数的拥有者(owner)是什么
3、 对于一个function,我们要搞清楚我们是把它当作函数使用还是在当作类使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值