JavaScript的es5中的原型

1.构造函数

1.1构造函数的引入

构造函数是一种特殊的函数，主要用来初始化对象，即成为对象成员变量赋初始值，他总与new一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里边。
听起来和其他语言的类相似，只不过他是个构造函数

//一个很简单的构造函数demo
function Star(name,age){
    this.name=name
    this.age=age
  }
  var s1=new Star('s1',12)
  console.log(s1);

在js中构造函数要注意的两点
1.构造函数用于创建某一类对象，首字母要大写
2.构造函数要使用new,来创建实例

new执行过程中做的四件事
1.在内存中创建一个空的对象
2.让this指向这个新的对象
3.执行构造函数里边的代码。给这个对象添加属性和方法
4.返回这个更新对象，因此构造函数不需要return

对于创建实例时候，new和不new的区别：
不new的话，需要手动把this属性return一下，这里的this指向的是window
new出来的实例对象，不需要手动return，this指向实例本身

1.2构造函数出现的问题

在介绍这一部分之前我们先看两个成员

1.实例成员：构造函数内部通过this创建的成员.只能通过实例化对象来访问
2.静态成员:在构造函数本身上添加，只能通过构造函数来访问。栗：Star.sing = …

 function Star(name,age){
    this.name=name
    this.age=age
    this.sing=function(){
      console.log('我会唱歌');
    }
  }
  var s1=new Star('s1',12)
  // 实例成员就是构造i函数内部通过this添加的成员
  // 1.实例成员只能通过实例化对象访问
  console.log(s1.age);
  // 不能这样console.log(Star.age);
  // 2.静态成员 在构造函数本身上添加，只能通过构造函数对象来访问
  Star.sex='男'
  // 不能这样访问 console.log(s1.sex);
  // console.log(Star.sex);

下边代码

 function Star(uname,age){
    this.uname=uname
    this.age=age
    this.sing=function(){
      console.log('唱歌');
    }
  }
  var ldh = new Star('刘',13)
  var zh = new Star('zh',17)
    ldh.sing()
    zh.sing()

上边我们已经知道当new，的时候会创建一个空的对象，然后使用实例自己的this指针指向这个对象。

我们看到了，如果是这样的话，函数被开辟了两次空间，而我们知道这里的方法的作用是一样的，没必要浪费空间，所以我们想怎样才能节约空间呢
于是我们尝试着把方法放到Star静态成员上，即Star.这样添加成员，但是实例对象用不了。这时候，重点来了，接着往下看…

2.原型

1.1构造函数原型对象prototype

1.构造函数原型对象介绍：
构造函数通过原型分配的函数是所有对象所共享的
javaScript规定，每一个构造函数都有一个prototype属性，指向另外一个对象。注意，这个对象的所有属性和方法，都会被构造函数所拥有。
原型用来共享方法，一般就会把公共的属性定义到构造函数里边，我们可以把一些公共不变的方法，直接定义到prototype对象上，这样所有对象都可以共享这些方法
看一下这个神奇的prototype对象里边都有些什么

解决上面构造函数带来的困扰

  function Star(name,age){
    this.name=name
    this.age=age
  }
  //在原型对象上添加的方法
  //注意这里先这样写，Star.prototype.方法名/属性名， 而不能使用字面量的方法写，否则原型被重写，原来的属性和方法会被覆盖，下边有解决方法
  Star.prototype.sing=function(){
    console.log('唱歌');
  }
  var ldh=new Star('ldh',14)
  var zh=new Star('zh',9)
  zh.sing()
  //两个实例公用该方法
  console.log(zh.sing === ldh.sing);

输出结果是：唱歌 true
恰恰证明了prototype对象的作用

1.2构造函数对象原型__proto__

不知道你有没有注意上边的prototype对象里边的成员，里边有一个__proto__
什么是__proto__呢
==对象都有一个属性__proto__==指向构造函数的prototype原型对象，我们实例对象可以使用prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在
__proto__对象原型和原型对象prototype是等价的

__proto__对象原型为对象实例的查找提供了方向，但是他是一个非标准属性，实际开发中，不可以使用这个属性，他只是内部指向原型对象prototype
构造函数–prototype–__proto__之间的三角关系

3.构造函数中的constructor

constructor是什么
也是在Star.prototype里边

constructor属性返回对象实例的构造函数
返回的是函数的引用，而不是函数名
例:JavaScript 数组 constructor 属性返回 function Array() { [native code] }

既然我们知道他能指向实例对象的构造函数，对于上边我们讨论的使用prototype的时候，使用字面量方法，会覆盖最初的原型，我们是不是找到了好的解决方法，我们可以使用该属性指回原来的原型

function Star(name,age){
    this.name=name
    this.age=age
  }
  //如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数
  Star.prototype={
    // 指回原来的构造i函数
    constructor:Star,
    sing:function(){
      console.log('唱歌');
    },
    dance:function(){
      console.log("跳舞");
    }
  }

4.原型链以及原型的应用

补充一下，this指向问题

// 构造函数中，this指向的是对象实例 s1
// 原型对象函数里边的this，指向的是实例对象 s1

 function Star(uname){
        this.uname=uname
  }
  var that
  Star.prototype.sing=function(){
    that=this
    console.log('唱歌');
  }
  var s1=new Star('ss')
  s1.sing()
  console.log(s1===that);
//输出结果是true，说明两者this指向的内容一样

我们已经知道每一个对象都有一个__proto__原型，那么prototype也是一个对象，他一定也会有一个__proto__，那么他会指向谁呢？
分别打印了 实例对象的__proto__,Star.prototype，Star.prototype__proto__,看一下

实例对象的__proto__是指向，构造函数的原型对象prototype是没有问题的。Star.prototype__proto__指向了Object对象，那么这样我们就看到了一条原型链。

有了这一条原型链，我们似乎发现了新的世界，我们可以继承Object对象的方法
使用原型链扩充内置对象的方法
我们看见了很多方法，发现没有求和方法，这时候我们想为数组内置对象添加一个求和方法

//向数组的原型对象上添加方法
Array.prototype.sum=function(){
    var sum = 0
    //如果你上边看了原型对象this的指向，就能理解这里了
    for(var i=0;i<this.length;i++){
        sum += this[i]
    }
    return sum
  }
  var arr= new Array(1,2,3,4)
  //调用该方法
  console.log(arr.sum());

写在最后，本文章仅记录自己的学习，如果有错误之处，欢迎指正！