js中的this关键字详解

转载自:

http://www.jb51.net/article/41656.htm  


this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分四种情况,详细讨论this的用法

this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如, 

 
  function test(){ 

    this.x = 1; 

  } 

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面分四种情况,详细讨论this的用法。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

请看下面这段代码,它的运行结果是1。 

 
  function test(){ 

    this.x = 1; 

    alert(this.x); 

  } 

  test(); // 1 

为了证明this就是全局对象,我对代码做一些改变:

 
  var x = 1; 

  function test(){ 

    alert(this.x); 

  } 

  test(); // 1 

运行结果还是1。再变一下:

 

 
  var x = 1; 

  function test(){ 

    this.x = 0; 

  } 

  test(); 

  alert(x); //0 
情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。 

 
  function test(){ 

    alert(this.x); 

  } 

  var o = {}; 

  o.x = 1; 

  o.m = test; 

  o.m(); // 1 



情况三 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。


 
  function test(){ 

    this.x = 1; 

  } 

  var o = new test(); 

  alert(o.x); // 1 


运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:


 
  var x = 2; 

  function test(){ 

    this.x = 1; 

  } 

  var o = new test(); 

  alert(x); //2 


运行结果为2,表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。 


 
  var x = 0; 

  function test(){ 

    alert(this.x); 

  } 

  var o={}; 

  o.x = 1; 

  o.m = test; 

  o.m.apply(); //0 

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为 

o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 原型 在 JavaScript ,每个对象都有一个原型对象,原型对象是一个普通的对象,其包含了一些属性和方法。当我们访问对象的属性或方法时,如果该对象本身没有该属性或方法,JavaScript 引擎会自动去该对象的原型对象查找,如果原型对象仍然没有,则会在原型对象的原型对象查找,一直查找到 Object.prototype,最后如果还没有找到,则会返回 undefined 。 2. 继承 在 JavaScript ,我们可以通过继承来实现代码复用和对象之间的关系。JavaScript 的继承有两种方式:通过原型链继承和通过构造函数继承。 3. 原型继承 原型继承是指在 JavaScript 通过设置对象的原型来实现继承的方式。具体的实现方式有很多种,其一种比较常见的方式是使用 Object.create() 方法来创建一个新对象,并将原型指定为另一个对象。示例如下: ``` let animal = { eat() { console.log("eating"); } }; let rabbit = Object.create(animal); rabbit.eat(); // 输出 "eating" ``` 在上面的示例,我们首先定义了一个 animal 对象,它包含一个 eat() 方法。然后我们通过 Object.create() 方法创建了一个新对象 rabbit,并将其原型设置为 animal,这样就实现了 rabbit 对象从 animal 对象继承 eat() 方法的功能。我们可以通过调用 rabbit.eat() 来验证该方法确实存在于 rabbit 对象。 4. 关键字 在 JavaScript ,有一些关键字和函数可以用来实现原型继承。其最常用的关键字是 extends 和 super。 extends 关键字可以用来继承一个类,示例如下: ``` class Animal { eat() { console.log("eating"); } } class Rabbit extends Animal { run() { console.log("running"); } } let rabbit = new Rabbit(); rabbit.eat(); // 输出 "eating" rabbit.run(); // 输出 "running" ``` 在这个示例,我们首先定义了一个 Animal 类,并为其定义了一个 eat() 方法。然后我们定义了一个 Rabbit 类,该类使用 extends 关键字继承了 Animal 类,并为其定义了一个 run() 方法。我们通过实例化 Rabbit 类来创建一个 rabbit 对象,并通过调用 rabbit.eat() 和 rabbit.run() 来验证其继承效果。 super 函数用于在子类调用父类的同名方法。示例如下: ``` class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + " makes a noise."); } } class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(this.name + " barks."); } } let dog = new Dog("Rex"); dog.speak(); // 输出 "Rex barks." ``` 在这个示例,我们首先定义了一个 Animal 类,并为其定义了一个构造函数和一个 speak() 方法。然后我们定义了一个 Dog 类,该类继承了 Animal 类,并为其定义了一个构造函数和一个 speak() 方法。 在 Dog 类的构造函数,我们调用了父类的构造函数,并传入了 name 参数。在 Dog 类的 speak() 方法,我们使用 super 函数调用了父类的同名方法,并将其重写为输出“barks.”。我们通过实例化 Dog 类来创建一个 dog 对象,并通过调用 dog.speak() 来验证其继承效果。 总结 在 JavaScript ,原型继承是一种非常重要的对象复用和代码组织方式。我们可以使用原型对象来实现原型继承,也可以使用关键字和函数来简化继承的过程。在实际开发,我们需要根据具体的业务场景和需求来选择最合适的继承方式和实现方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值