JavaScript中的this指向; bind, call, 与apply重定向(待续...)

JavaScript中的this指向既可谓语言之精髓同时又是初学者的大坑,最近在学习过程中经历了许多磕磕碰碰,在此分享一下一些心得体会。

1. 最简单的情况:函数中的this

我们看下面一个例子

var name = 'Window';
var person = {
  name: 'Person',
  greeting: function () {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};
var greeting = person.greeting;
greeting();  // Output #1: Hi! I'm Window.
person.greeting();  // Output #2: Hi! I'm Person.

从这个最简单的例子中可以看出,在最普通的情况下,this所指的对象就是调用它的对象:#1中是window,#2中是person

2. this的重定向

  1. bind绑定对象

有时候我们希望函数不论在何处调用都能表现得一致,即this始终指向同一个对象,这时我们可以使用bind来绑定该对象至函数,如下:

var name = 'Window';
var person = {
  name: 'Person',
  greeting: function () {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};
var greetingByPerson = person.greeting.bind(person);
greetingByPerson();  // Output: Hi! I'm Person.

虽然是在最外层调用(即被window调用),但函数已被绑定至person,因此this始终指向person

  1. callapply传入对象

有时候需要更灵活的使用函数,需要在不同场合使this指向不同的对象,这时可以使用callapply传入对象,如下:

var name = 'Window';
var person = {
  name: 'Person',
  greeting: function () {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};
var stranger= {
  name:'Stranger'
};
greeting=person.greeting;
greeting.call(person);  // Output #1: Hi! I'm Person.
greeting.apply(person);  // Output #2: Hi! I'm Person.
greeting.call(stranger);  // Output #3: Hi! I'm Stranger.
greeting.apply(stranger);  // Output #4: Hi! I'm Stranger.

由于stranger对象中没有定义stranger.greeting这一函数,我们可以使用greeting.call(stranger)这样的方式来使this指向stanger;当然更多的时候这样的通用函数可能会定义在外层而非某一对象内。

applycall的作用类似,其接受的第一个参数都是重定向的对象,区别在于接收后面参数的方法: call接受连续的多个参数而apply接受一个数组。

注意:node.js中执行代码时最外层的调用对象会变成undefine而非浏览器中的window

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,149评论 0 2
  • 1.含义 this就是属性或方法“当前”所在的对象。 上面代码中,this.name表示name属性所在的那个对象...
    Kevin丶CK阅读 816评论 0 3
  • 前言 面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。读者可以先拉到底部看总...
    若川i阅读 1,131评论 0 10
  • this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在Java...
    Ming_Hu阅读 210评论 0 0
  • 爱情是人类永恒的话题,却只是年轻人的。 爱情是人类永痕的话题,却是全人类的。 做为一个所谓的“爱情专家”。...
    哆啦西蒙阅读 348评论 0 1