Js构造函数

Js中的构造函数有什么用处?

类似于Java或C#中类的实例化,通过构造函数new出来的对象都具有相同的特点(属性)和行为(方法),注意,函数构造返回的是一个对象

  • 常规姿势
//声明一个"人"的构造函数,目的是通过new出来的对象都是一个个的具体的"人"
var Person=function(){
  
  //私有属性,该属性new出来的对象时无法获取到的.
  var prx="other";

  //定义了eye的属性
  //在这里eye是实例属性,也就是说,通过new出来的对象都具备eye的属性
  this.name="double";
  
  //我们用var 申明了一个私有方法,该方法 不能被 new Person 调用到,
  //一般的,我们只需要再内部使用到的方法可最好声明称私有方法.
  var prxMethond=function(){
      console.log("in prxMethod");
  }
  //定义了say的方法
  //同eye,say是一个实例方法,new出来的对象都有say的方法
  this.say=function(){
    console.log("hi i am "+this.name);
   }
}
//为Person定义了一个原型方法eat,该方法为公共方法,
//每一个通过new Person 实例出来的对象都共享同一个eat方法,
//当然如果不想共享可在新对象中进行重写覆盖
Person.prototype.eat=function(){
  console.log(this.name+"eat something...");
}
//定义静态方法,该方法目的在于不用new Person 就能调用该方法,
//我们把不用实例化就能调用的方法叫做静态方法
Person.staticMethod=function(){
  console.log("this is static method");
}
在Js中使用new 关键字调用一个函数的问题:
var zhangsan=new Person();

实际上内部是这样的:

var zhangsan={};
zhangsan.__proto__=Person.prototype;
Person.call(zhangsan);

上面三句代码的说明:

  1. 声明了一个zhangsan的空对象
  2. 将Person的prototype赋值给zhangsan的proto属性
    关于对象的prototype和proto概念如下:
    prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。
    proto是一个对象拥有的内置属性(每个对象都有一个proto属性),是JS内部使用寻找原型链的属性。
    这就是为什么zhangsan可以调用到Person原型(Person.prototype)方法的原因
  3. 调用Person函数,并且把zhangsan当成是this传入函数中,这就是为什么zhangsan可以调用Person函数定义的this.属性或this.方法的原因
构造函数返回值得问题

任意一个函数都是有返回值得,如果我们不明确的写出返回值 函数默认返回的是undefined.构造函数也是一样

var f=function(){
  this.name="f_name";
  this.say=function(){
    console.log("say");
  }
  console.log("in f");
}
f()

//我们用chrome执行上面代码获取的结果为:
//in f
//undefined

//还是上面的f函数,换一个方式调用:
var fo=new f();
fo
//打印结果为:
//{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}
//说明该方法返回的是:执行完:fo.__proto__=f.prototype绑定关系和f.call(fo)调用的fo对象.

如果我的构造函数有明确的返回值呢?

var f=function(){
  this.name="f_name";
  this.say=function(){
    console.log("say");
  }
  return '123';
}
//非 new调用:
f(); //返回"123"的字符串,这相当于就是调用的一个普通函数
//new 调用
new f();
//返回值同返回undefined时相同的{__proto__:f,name:"f_name",say:function()arguments: null,caller: null,length: 0,name: "",prototype....}

如果我们的返回值是一个对象呢?

var f=function(){
  this.name="f_name";
  this.say=function(){
    console.log("say");
  }
  return {"age":25}
}
//非 new调用:
f(); //返回{"age":25}的字符串,这相当于就是调用的一个普通函数
//new 调用
new f();
//返回值是:{age: 25}

也就是说,如果我们的函数明确返回一个对象,则无论是否使用new关键字调用,都获取的是返回的这个对象,这也是很多使用该方法构建模块化的方法和原理

构造函数的调用

结合上面的例子和原理的理解,下面做一些基本的测试

Person().staticMethod()//报错,因为Person()是一般的函数调用,因为Person没有明确的返回值所以默认返回为undefined,所以 调用代码实际上是undefined.方法,所以error了
Person.staticMethod()//打印结果为:this is static method,此次调用的是静态方法,如何定义的就如何调用
Person.prototype.eat()//调用原型链中的方法,但eat中的this,指定的是window 所以打印结果为:undefined eat something...
var zhangsan=new Person()
//先在zhangsan对象中找是否有eat方法发现没有,
//则通过__proto__去找,上面我们提到过,
//new 关键字调用会将: zhangsan,__proto__=Person.prototype,
//所以就会去Person.prototype找eat方法,找到了调用,
//而关于this.name获取到值原因同样是因为new 关键字的 Person.call(zhangsan)的执行操作,
//将Person中的this相关的内容都进行了"copy",其实就是this复制到了zhangsan对象中,
//关于这点我们前面已验证过了.所以zhangsan.name是能找到值的
//输出结果就成了:double eat something...
zhangsan.eat()//double eat something...
zhangsan.name//同上
    原文作者:daiyunchao
    原文地址: https://www.jianshu.com/p/5f38069a4acc
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞