javascript技术难点之this、new、apply和call详解

广告位招租
扫码页面底部二维码联系

this、new、call和apply【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。的相关问题

转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。

讲解this指针的原理是个很复杂的问题,【本文受版权保护】【版权所有,侵权必究】如果我们从javascript里this【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】的实现机制来说明this,很多朋友可能会【未经授权禁止转载】【本文受版权保护】越来越糊涂,因此本篇打算换一个思路从应用【转载请注明来源】本文版权归作者所有,未经授权不得转载。的角度来讲解this指针,从这个角度理解【作者:唐霜】著作权归作者所有,禁止商业用途转载。this指针更加有现实意义。

【未经授权禁止转载】【本文首发于唐霜的博客】【未经授权禁止转载】【本文首发于唐霜的博客】

下面我们看看在java语言里是如何使用t【原创不易,请尊重版权】【本文首发于唐霜的博客】his指针的,代码如下:

本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。
public class Person {
  private String name;
  private String sex;
  private int age;
  private String job;
  public Person(String name, String sex, int age, String job) {
    super();
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.job = job;
  }
  private void showPerson() {
    System.out.println("姓名:" + this.name);
    System.out.println("性别:" + this.sex);
    System.out.println("年龄:" + this.age);
    System.out.println("工作:" + this.job);
  }
  public void printInfo() {
    this.showPerson();
  }
  public static void main(String[] args) {
    Person person = new Person("马云", "男", 46, "董事长");
    person.printInfo();
  }
}

//姓名:马云
//性别:男
//年龄:46
//工作:董事长

上面的代码执行后没有任何问题,下面我修改原创内容,盗版必究。【转载请注明来源】下这个代码,加一个静态的方法,静态方法里【本文首发于唐霜的博客】【版权所有,侵权必究】使用this指针调用类里的属性,如下图所【转载请注明来源】【关注微信公众号:wwwtangshuangnet】示:

原创内容,盗版必究。原创内容,盗版必究。未经授权,禁止复制转载。

著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。

我们发现IDE会报出语法错误“Canno【未经授权禁止转载】【原创不易,请尊重版权】t use this in a stat【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netic context”,this指针在j转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ava语言里是不能使用在静态的上下文里的原创内容,盗版必究。原创内容,盗版必究。

【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

在面向对象编程里有两个重要的概念:未经授权,禁止复制转载。一个是类,一个是实例化的对象【版权所有】唐霜 www.tangshuang.net, 类是一个抽象的概念,用个形象的比喻表未经授权,禁止复制转载。【本文受版权保护】述的话,类就像一个模具,而实例化对象就是【转载请注明来源】著作权归作者所有,禁止商业用途转载。通过这个模具制造出来的产品,实例化对象才【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。是我们需要的实实在在的东西, 类和实例化未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。对象有着很密切的关系,但是在使用上类的功【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net能是绝对不能取代实例化对象,就像模具和模【作者:唐霜】【关注微信公众号:wwwtangshuangnet】具制造的产品的关系,二者的用途是不相同的本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。

有上面代码我们可以看到,【访问 www.tangshuang.net 获取更多精彩内容】this【原创不易,请尊重版权】指针在java【关注微信公众号:wwwtangshuangnet】语言里只能在实例化对象里使用,this【原创不易,请尊重版权】指针等于这个被实例化好的对象转载请注明出处:www.tangshuang.net,而this后面加上点操作符,点操作符后【关注微信公众号:wwwtangshuangnet】【作者:唐霜】面的东西就是this所拥有的东西,例如:【原创内容,转载请注明出处】【转载请注明来源】姓名,工作,手,脚等等。

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】【作者:唐霜】

其实【本文受版权保护】javascript【关注微信公众号:wwwtangshuangnet】里的this原创内容,盗版必究。指针逻辑上的概念也是实例化对象本文作者:唐霜,转载请注明出处。,这一点和java语言里的this指针是【作者:唐霜】转载请注明出处:www.tangshuang.net一致的,但是javascript里的th转载请注明出处:www.tangshuang.net【作者:唐霜】is指针却比java里的this难以理解【未经授权禁止转载】【本文首发于唐霜的博客】的多,究其根本原因我个人觉得有三个原因:

未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。

  原因一:javascript【作者:唐霜】是一个函数编程语言,怪就怪在它也有thi未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。s指针,说明这个函数编程语言也是面向对象的本文作者:唐霜,转载请注明出处。【未经授权禁止转载】语言,说的具体点,javascript里的函数是一个高阶函数,编程语言里的高阶本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。函数是可以作为对象传递的,同时javas原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】cript里的函数还有可以作为构造函数,这个构造函【版权所有,侵权必究】【作者:唐霜】数可以创建实例化对象,结果导致方法执行时本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net候this指针的指向会不断发生变化,很难控制。【本文受版权保护】

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【转载请注明来源】

  原因二:javascript【关注微信公众号:wwwtangshuangnet】里的全局作用域对this【访问 www.tangshuang.net 获取更多精彩内容】指针有很大的影响,由上面java转载请注明出处:www.tangshuang.net的例子我们看到,this【本文首发于唐霜的博客】指针只有在使用new【未经授权禁止转载】操作符后才会生效,但是javascrip转载请注明出处:www.tangshuang.net【本文受版权保护】t里的this未经授权,禁止复制转载。在没有进行new【访问 www.tangshuang.net 获取更多精彩内容】操作也会生效,这时候this【本文首发于唐霜的博客】往往会指向全局对象window【本文受版权保护】本文作者:唐霜,转载请注明出处。

原创内容,盗版必究。【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。

  原因三:javascript转载请注明出处:www.tangshuang.net里call【本文首发于唐霜的博客】和apply【转载请注明来源】操作符可以随意改变this【原创不易,请尊重版权】指向,这看起来很灵活,但是这种不合常理的【本文首发于唐霜的博客】【转载请注明来源】做法破坏了我们理解this指针的本意,同时也让写代码时候很难理解t【版权所有】唐霜 www.tangshuang.net【转载请注明来源】his的真正指向原创内容,盗版必究。

本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。未经授权,禁止复制转载。【原创内容,转载请注明出处】

上面的三 个原因都违反了传统this指针转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。使用的方法,它们都拥有有别于传统this【原创不易,请尊重版权】未经授权,禁止复制转载。原理的理解思路,而在实际开发里三个原因又【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net往往会交织在一起,这就更加让人迷惑 不解原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net了,今天我要为大家理清这个思路,其实ja【版权所有,侵权必究】【版权所有,侵权必究】vascript里的this指针有一套固【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】有的逻辑,我们理解好这套逻辑就能准确的掌【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。握好this指针的使 用。

【本文受版权保护】著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。

我们先看看下面的代码:本文版权归作者所有,未经授权不得转载。

【版权所有,侵权必究】【作者:唐霜】【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net
复制代码
<script type="text/javascript">
  this.a = "aaa";
  console.log(a);//aaa
  console.log(this.a);//aaa
  console.log(window.a);//aaa
  console.log(this);// window
  console.log(window);// window
  console.log(this == window);// true
  console.log(this === window);// true
</script>

在script标签里我们可以直接使用th【本文首发于唐霜的博客】【作者:唐霜】is指针,this指针就是window对【未经授权禁止转载】未经授权,禁止复制转载。象,我们看到即使使用三等号它们也是相等的【版权所有,侵权必究】【版权所有,侵权必究】。全局作用域常常会干扰我们很好的理解ja【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】vascript语言的特性,这种干扰的本本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net质就是:

【作者:唐霜】【本文受版权保护】【作者:唐霜】【原创内容,转载请注明出处】【版权所有,侵权必究】

在javascript本文版权归作者所有,未经授权不得转载。语言里全局作用域可以理解为window原创内容,盗版必究。对象,记住window未经授权,禁止复制转载。是对象而不是类,也就是说window【原创内容,转载请注明出处】是被实例化的对象,这个实例化的过程是在页【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】面加载时候由javascript引擎完成的,整个页面里的要素都被浓缩到这【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net个window对象,因为程序员无法通过编程语言来控制和本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。操作这个实例化过程,所以开发时候我们就没原创内容,盗版必究。【版权所有,侵权必究】有构建这个this指针的感觉,常常会忽视它,这就是干扰我们【转载请注明来源】【原创内容,转载请注明出处】在代码里理解this指针指向window【原创内容,转载请注明出处】的情形。【未经授权禁止转载】

转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

干扰的本质还和function的使用有关未经授权,禁止复制转载。未经授权,禁止复制转载。,我们看看下面的代码:

【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net
<script type="text/javascript">
  function ftn01(){
    console.log("I am ftn01!");
  }
  var ftn02 = function(){
    console.log("I am ftn02!");
  }
</script>
复制代码

 本文作者:唐霜,转载请注明出处。

【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】

上面是我们经常使用的【版权所有,侵权必究】两种定义函数的方式,第一种定义函数的方式【未经授权禁止转载】【版权所有,侵权必究】javascript本文作者:唐霜,转载请注明出处。语言称作声明函数,第二种定义函数的方式叫转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。做函数表达式,这两种方式我们通常认为是等价的,但是它转载请注明出处:www.tangshuang.net原创内容,盗版必究。们其实是有区别的,而这个区别常常会让我们【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。混淆this指针的使用,我们再看看下面的本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】代码:

【未经授权禁止转载】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。
复制代码
<script type="text/javascript">
  console.log(ftn01);//ftn01() 注意:在firebug下这个打印结果是可以点击,点击后会显示函数的定义
  console.log(ftn02);// undefined
  function ftn01(){
    console.log("I am ftn01!");
  }
  var ftn02 = function(){
    console.log("I am ftn02!");
  }
</script>

这又是一 段没有按顺序执行的代码,先看看转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】ftn02,打印结果是undefined【作者:唐霜】【未经授权禁止转载】,undefined我在前文里讲到了,在【关注微信公众号:wwwtangshuangnet】【转载请注明来源】内存的栈区已经有了变量的名称,但是 没有本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】栈区的变量值,同时堆区是没有具体的对象,本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】这是javascript引擎在预处理(群原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。里东方说预处理比预加载更准确,我同意他的【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。说法,以后文章里我都 写为预处理)扫描变转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】量定义所致,但是ftn01的打印结果很令【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。人意外,既然打印出完成的函数定义了,而且【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】代码并没有按顺序执行,这只能说明一个问题本文作者:唐霜,转载请注明出处。【本文受版权保护】

原创内容,盗版必究。【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】

在javascript【版权所有,侵权必究】语言通过声明函数方式定义函数,javas原创内容,盗版必究。转载请注明出处:www.tangshuang.netcript引擎在预处理过程里就把函数定义和赋值操作【转载请注明来源】【版权所有,侵权必究】都完成了,在这里我补充下javascri未经授权,禁止复制转载。【作者:唐霜】pt里 预处理的特性,其实预处理是和执行环境转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】相关,在上篇文章里我讲到执行环境有两大类【转载请注明来源】【本文首发于唐霜的博客】:全局执行环境和局部执行环境,执行环境是本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】通过上下文变量体现的,其实这 个过程都是著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。在函数执行前完成,预处理就是构造执行环境转载请注明出处:www.tangshuang.net【作者:唐霜】的另一个说法,总而言之预处理和构造执行环【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net境的主要目的就是明确变量定义,分清变量的著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。边界,但是在全 局作用域构造或者说全局变【转载请注明来源】【原创内容,转载请注明出处】量预处理时候对于声明函数有些不同,声明函未经授权,禁止复制转载。【原创不易,请尊重版权】数会将变量定义和赋值操作同时完成,因此我【原创内容,转载请注明出处】【版权所有,侵权必究】们看到上面代码的运行结果。由于声明函数都【作者:唐霜】【版权所有,侵权必究】 会在全局作用域构造时候完成,因此声明函【作者:唐霜】【版权所有,侵权必究】数都是window对象的属性,这就说明为什么我们不管在哪里【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。声明函数,声明函数最终都是属于windo【作者:唐霜】【本文受版权保护】w对象的原因了未经授权,禁止复制转载。【版权所有,侵权必究】

【原创内容,转载请注明出处】未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

关于函数表达式的写法还有秘密可以探寻,我未经授权,禁止复制转载。【原创内容,转载请注明出处】们看下面的代码:

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【未经授权禁止转载】
<script type="text/javascript">
  function ftn03(){
    var ftn04 = function(){
      console.log(this);// window
    };
    ftn04();
  }
  ftn03();
</script>

运行结果 我们发现ftn04虽然在ftn【原创内容,转载请注明出处】【作者:唐霜】03作用域下,但是执行它里面的this指原创内容,盗版必究。【版权所有,侵权必究】针也是指向window,其实函数表达式的转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。写法我们大多数更喜欢在函数内部写, 因为【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】声明函数里的this指向window这已【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】经不是秘密,但是函数表达式的this指针【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。指向window却是常常被我们所忽视,特【原创内容,转载请注明出处】【未经授权禁止转载】别是当它被写在另一个 函数内部时候更加如转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】此。

【作者:唐霜】原创内容,盗版必究。【本文首发于唐霜的博客】

其实在javascript【原创不易,请尊重版权】语言里任何匿名函数都是属于window转载请注明出处:www.tangshuang.net对 象,它们也都是在全局作用域构造时候完【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】成定义和赋值,但是匿名函数是没有名字的函本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。数变量,但是在定义匿名函数时候它会返回自未经授权,禁止复制转载。【版权所有,侵权必究】己的内存地址,如果此时有个变 量接收了这原创内容,盗版必究。【未经授权禁止转载】个内存地址,那么匿名函数就能在程序里被使转载请注明出处:www.tangshuang.net原创内容,盗版必究。用了,因为匿名函数也是在全局执行环境构造【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】时候定义和赋值,所以匿名函数的this指向也是window未经授权,禁止复制转载。对象,所以上面代码执行时候ftn04【访问 www.tangshuang.net 获取更多精彩内容】的this转载请注明出处:www.tangshuang.net也是指向window未经授权,禁止复制转载。,因为javascript转载请注明出处:www.tangshuang.net变量名称不管在那个作用域有效,堆区的存储未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。的函数都是在全局执行环境时候就被固定下来未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net了,变量的名字只是一个指代而已。

原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】【转载请注明来源】原创内容,盗版必究。

这下子坏了,this都指向window,【本文首发于唐霜的博客】【作者:唐霜】那我们到底怎么才能改变它了?

【版权所有,侵权必究】【本文受版权保护】著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】【本文受版权保护】

在本文开头我说出了this的秘密,原创内容,盗版必究。this【访问 www.tangshuang.net 获取更多精彩内容】都是指向实例化对象转载请注明出处:www.tangshuang.net, 前面讲到那么多情况this都指向wi转载请注明出处:www.tangshuang.net【未经授权禁止转载】ndow,就是因为这些时候只做了一次实例【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net化操作,而这个实例化都是在实例化wind转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。ow对象,所以this都是指 向wind【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。ow。我们要把this从window变成【未经授权禁止转载】【本文首发于唐霜的博客】别的对象,就得要让function被实例【版权所有】唐霜 www.tangshuang.net【本文受版权保护】化,那如何让javascript的fun本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】ction实例 化呢?答案就是使用new本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。操作符。我们看看下面的代码:

本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。
<script type="text/javascript">
  var obj = {
    name:"sharpxiajun",
    job:"Software",
    show:function(){
      console.log("Name:" + this.name + ";Job:" + this.job);
      console.log(this);// Object { name="sharpxiajun", job="Software", show=function()}
    }
  };
  var otherObj = new Object();
  otherObj.name = "xtq";
  otherObj.job = "good";
  otherObj.show = function(){
    console.log("Name:" + this.name + ";Job:" + this.job);
    console.log(this);// Object { name="xtq", job="good", show=function()}
  };
  obj.show();//Name:sharpxiajun;Job:Software
  otherObj.show();//Name:xtq;Job:good
</script>

这 是我上篇讲到的关于this使用的一个未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net例子,写法一是我们大伙都爱写的一种写法,未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。里面的this指针不是指向window的著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】,而是指向Object的实 例,fire【原创不易,请尊重版权】【原创内容,转载请注明出处】bug的显示让很多人疑惑,其实Objec本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。t就是面向对象的类,大括号里就是实例对象转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】了,即obj和otherObj。Java未经授权,禁止复制转载。原创内容,盗版必究。script 里通过字面量方式定义对象的【作者:唐霜】本文作者:唐霜,转载请注明出处。方式是new Object的简写,二者是【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net等价的,目的是为了减少代码的书写量,可见转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。即使不用new操作字面量定义法本质也是n【作者:唐霜】【关注微信公众号:wwwtangshuangnet】ew操作符,所以通过new改变this 本文作者:唐霜,转载请注明出处。【本文受版权保护】指针的确是不过攻破的真理。

转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【关注微信公众号:wwwtangshuangnet】

下面我使用javascript来重写本篇【版权所有】唐霜 www.tangshuang.net【作者:唐霜】开头用java定义的类,代码如下:

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。
<script type="text/javascript">
  function Person(name,sex,age,job){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.job = job;
    this.showPerson = function(){
      console.log("姓名:" + this.name);
      console.log("性别:" + this.sex);
      console.log("年龄:" + this.age);
      console.log("工作:" + this.job);
      console.log(this);// Person { name="马云", sex="男", age=46, 更多...}
    }
  }

  var person = new Person("马云", "男", 46, "董事长");
  person.showPerson();
</script>

看this指针的打印,类变成了Perso原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。n,这表明function Person【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net就是相当于在定义一个类,在javascr【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netipt里function的意义实在太多,function【本文受版权保护】既是函数又可以表示对象,function是函数时候还能当做构造函数,javasc【版权所有,侵权必究】【原创不易,请尊重版权】ript的构造函数我常认为是把类和构造函数合二为原创内容,盗版必究。【未经授权禁止转载】一,当然在javascript语言规范里是没有类的概念,但是我这种理解【未经授权禁止转载】未经授权,禁止复制转载。可以作为构造函数和普通函数的一个区别,这【未经授权禁止转载】【作者:唐霜】样理解起来会更加容易些本文作者:唐霜,转载请注明出处。

【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。

下面我贴出在《javascript高级编未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。程》里对new操作符的解释:

本文作者:唐霜,转载请注明出处。【本文受版权保护】【原创内容,转载请注明出处】【作者:唐霜】【作者:唐霜】

  new【原创内容,转载请注明出处】操作符会让构造函数产生如下变化:转载请注明出处:www.tangshuang.net

本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。

  未经授权,禁止复制转载。1. 本文版权归作者所有,未经授权不得转载。创建一个新对象;未经授权,禁止复制转载。

【转载请注明来源】【原创不易,请尊重版权】【原创不易,请尊重版权】【作者:唐霜】本文版权归作者所有,未经授权不得转载。

  【本文受版权保护】2. 本文版权归作者所有,未经授权不得转载。将构造函数的作用域赋给新对象(因此thi著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.nets就指向了这个新对象);【转载请注明来源】

原创内容,盗版必究。转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】

  著作权归作者所有,禁止商业用途转载。3. 本文作者:唐霜,转载请注明出处。执行构造函数中的代码(为这个新对象添加属原创内容,盗版必究。转载请注明出处:www.tangshuang.net性);

未经授权,禁止复制转载。【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。

  【未经授权禁止转载】4. 本文作者:唐霜,转载请注明出处。返回新对象原创内容,盗版必究。

【未经授权禁止转载】【未经授权禁止转载】【版权所有,侵权必究】

关于第二 点其实很容易让人迷惑,例如前面【作者:唐霜】【转载请注明来源】例子里的obj和otherObj,obj【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。.show(),里面this指向obj,未经授权,禁止复制转载。原创内容,盗版必究。我以前文章讲到一个简单识别this 方式【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net就是看方法调用前的对象是哪个this就指本文作者:唐霜,转载请注明出处。【作者:唐霜】向哪个,其实这个过程还可以这么理解,在全【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。局执行环境里window就是上下文对象,【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】那么在obj里局部作 用域通过obj来代【原创内容,转载请注明出处】【作者:唐霜】表了,这个window的理解是一致的。

【原创内容,转载请注明出处】【本文首发于唐霜的博客】【未经授权禁止转载】【原创不易,请尊重版权】

第四点也要着重讲下,记住构造函数被new未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。操作,要让new正常作用最好不能在构造函【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。数里写return,没有return的构【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。造函数都是按上面四点执行,有了retur著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】n情况就复杂了,这个知识我会在讲prot【本文受版权保护】【版权所有,侵权必究】otype时候讲到。

【未经授权禁止转载】【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】

Javascript还有一种方式可以改变本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】this指针,这就是call方法和app【原创不易,请尊重版权】【未经授权禁止转载】ly方法,call和apply方法的作用【转载请注明来源】本文作者:唐霜,转载请注明出处。相同,就是参数不 同,call和appl【本文受版权保护】【版权所有,侵权必究】y的第一个参数都是一样的,但是后面参数不原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】同,apply第二个参数是个数组,cal【原创不易,请尊重版权】【原创不易,请尊重版权】l从第二个参数开始后面有许多参数。Cal转载请注明出处:www.tangshuang.net【未经授权禁止转载】l 和apply的作用是什么,这个很重要未经授权,禁止复制转载。【本文受版权保护】,重点描述如下:

【作者:唐霜】【转载请注明来源】【本文受版权保护】

  Call【原创内容,转载请注明出处】和apply【版权所有】唐霜 www.tangshuang.net是改变函数的作用域(有些书里叫做改变函数【版权所有】唐霜 www.tangshuang.net【作者:唐霜】的上下文)

【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【版权所有,侵权必究】【原创不易,请尊重版权】原创内容,盗版必究。

这个说明我们参见上面new操作符第二条:

【版权所有,侵权必究】【作者:唐霜】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】【作者:唐霜】

  将构造函数的作用域赋给新对象(因此t【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】his就指向了这个新对象);原创内容,盗版必究。

本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

  Call原创内容,盗版必究。和apply【本文首发于唐霜的博客】是将this【原创不易,请尊重版权】指针指向方法的第一个参数。原创内容,盗版必究。

著作权归作者所有,禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】

我们看看下面的代码:本文作者:唐霜,转载请注明出处。

【转载请注明来源】【未经授权禁止转载】本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。
<script type="text/javascript">
  var name = "sharpxiajun";
  function ftn(name){
    console.log(name);
    console.log(this.name);
    console.log(this);
  }
  ftn("101");
  var obj = {
    name:"xtq"
  };
  ftn.call(obj,"102");
</script>

我们看到apply和call改变的是th原创内容,盗版必究。【原创内容,转载请注明出处】is的指向,这点在开发里很重要,开发里我本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net们常常被this所迷惑,迷惑的根本原因我【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】在上文讲到了,这里我讲讲表面的原因:

本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】

  表面原因就是我们定义对象使用对象的字本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。面表示法,字面表示法在简单的表示里我们很【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。容易知道this指向对象本身,但是这个对象会有方法,方法本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。的参数可能会是函数,而这个函数的定义里也【原创内容,转载请注明出处】原创内容,盗版必究。可能会使用this指针,如果传入的函数没有被实例化过和被实【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】例化过,this的指向是不同,有时我们还想在传入函数里通【关注微信公众号:wwwtangshuangnet】【作者:唐霜】过this指向外部函数或者指向被定义对象本身,这些【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net乱七八糟的情况使用交织在一起导致this变得很复杂,结果就变得糊里糊涂。【原创内容,转载请注明出处】

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】

其实理清上面情况也是有迹可循的,就以定义【本文受版权保护】本文作者:唐霜,转载请注明出处。对象里的方法里传入函数为例:

本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

  情形一:传入的参数是函数的别名,那么【作者:唐霜】本文版权归作者所有,未经授权不得转载。函数的this就是指向window【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

【关注微信公众号:wwwtangshuangnet】【转载请注明来源】本文作者:唐霜,转载请注明出处。

  情形二:传入的参数是被new原创内容,盗版必究。过的构造函数,那么this转载请注明出处:www.tangshuang.net就是指向实例化的对象本身;原创内容,盗版必究。

【本文首发于唐霜的博客】原创内容,盗版必究。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。

  情形三:如果我们想把被传入的函数对象【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。里this的指针指向外部字面量定义的对象,那么我们未经授权,禁止复制转载。【原创不易,请尊重版权】就是用apply和call本文作者:唐霜,转载请注明出处。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。

我们可以通过代码看出我的结论,代码如下:

【作者:唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net
<script type="text/javascript">
var name = "I am window";
var obj = {
  name:"sharpxiajun",
  job:"Software",
  ftn01:function(obj){
    obj.show();
  },
  ftn02:function(ftn){
    ftn();
  },
  ftn03:function(ftn){
    ftn.call(this);
  }
};
function Person(name){
  this.name = name;
  this.show = function(){
    console.log("姓名:" + this.name);
    console.log(this);
  }
}
var p = new Person("Person");
obj.ftn01(p);
obj.ftn02(function(){
  console.log(this.name);
  console.log(this);
});
obj.ftn03(function(){
  console.log(this.name);
  console.log(this);
});
</script>
复制代码

结果如下:转载请注明出处:www.tangshuang.net

【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】

最后再总结一下:著作权归作者所有,禁止商业用途转载。

【作者:唐霜】【原创不易,请尊重版权】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。

  如果在javascript【本文首发于唐霜的博客】语言里没有通过new【原创内容,转载请注明出处】(包括对象字面量定义)、call【版权所有,侵权必究】和apply【原创内容,转载请注明出处】改变函数的this【原创内容,转载请注明出处】指针,函数的this著作权归作者所有,禁止商业用途转载。指针都是指向window著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。

【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net

原文地址:http://www.cnbl本文作者:唐霜,转载请注明出处。原创内容,盗版必究。ogs.com/sharpxiajun/【作者:唐霜】本文版权归作者所有,未经授权不得转载。p/4148932.html

【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】【转载请注明来源】著作权归作者所有,禁止商业用途转载。

2016-01-20 3898

为价值买单,打赏一杯咖啡

本文价值38.98RMB