IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

JS中的构造函数

Javascript Xueqi 1474℃ 0评论

先来看这个代码:
   function Person(name,age){
      this.name=name;
      this.age=age;
      this.sayHi=function(){
      console.log("姓名:"+this.name+",年龄:"+this.age);
  };
     //return this; 隐式返回了this(当前创建的那个对象)
 }
    var p1=new Person("ZDL",22);
    var p2=new Person("SLL",21);
    p1.sayHi(); //姓名:ZDL,年龄:22
    p2.sayHi(); //姓名:SLL,年龄:21

   和其它语言一样,这里使用new运算符创建了一个对象。
    我们知道,函数有多钟调用方式,使用了new调用一个函数
   就是构造函数调用模式.
     创建Person的实例,经历了以下几个步骤:
     1.创建一个新的对象。
     2.将构造函数的作用域赋给新对象.
     3.执行构造函数中的代码(给对象做了一些初始化)
    4.返回这个创建的对象. 系统隐式的返回了this.这样变量p1才得到了新对象的引用

我们来看下面的代码:
1.
      function Person(name,age){
          this.name=name;
          this.age=age;
          this.sayHi=function(){
         console.log("姓名:"+this.name+",年龄:"+this.age);
     };
     return this;
  }
  var p1=new Person("SLL",21);
  p1.sayHi(); //姓名:ZDL,年龄:22
  发现运行效果和之前的一样,这说明,系统在暗地里确实是返回了this.
   还是觉得有疑惑的话,我们再来看看返回其它对象会怎么样
2.
   function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
     console.log("姓名:"+this.name+",年龄:"+this.age);
  };
    //return "我返回的是字符串";
   /*如果返回的不是对象,而是其它的话,p1得到的还是原来创建的对象,而不是我们自己返回的字符串
     这里不知道原因是什么,可能是系统会对返回值最检查。
     不管如何,我们知道在这个构造函数里确实是返回了东西就行。
   */
   return {name:1,age:22};
}
  var p1=new Person("SLL",21);
  p1.sayHi(); //TypeError: p1.sayHi is not a function
  这是因为我们返回另一个对象,这个对象没有sayHi方法.
  console.log(p1);// Object { name=1, age=22} 这里确实是我们返回的对象

  3.我们再来看看这个Person作为普通函数调用会怎么样
   var t= Person("ZDL",22);
   console.log(t); //undefined 因为作为普通函数,不会隐式返回this,属性值都被添加到window对象上了
   window.sayHi();////姓名:ZDL,年龄:22

  改变this指针,在另一个对象的作用域中调用
   var o={};
   Person.call(o,"雪奇",21);
   console.log(o);//Object { name="雪奇", age=21, sayHi=function()}
    o.sayHi(); //姓名:雪奇,年龄:21

转载请注明:凌风阁 » JS中的构造函数

喜欢 (6)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址