图一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA_Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script>
window.onload = function () {
function Star(name,age) {
this.name = name;
this.age = age;
this.sing= function () {
console.log("正在唱歌！");
}
}
var ldh = new Star('ldh',17);
ldh.sing();
var pcj = new Star('pcj',19);
pcj.sing();
console.log(pcj.sing === ldh.sing);//false
//上面这种方法会导致Star函数的对象各自创建name age sing函数，
// 每一个对象都创建一个sing函数导致内存浪费
// 那么因该如何来避免内存浪费呢？
// 构造函数通过原型分配的函数是所有对象所共享的。
// JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。
// 注意这个prototype就是个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
// 我们可以把那些不变的方法，直接定义在prototype对象上，
//这样所有对象的实例就可以共享这些方法。
function Star2(name,age) {
this.name = name;
this.age= age;
}
Star2.prototype.sing = function () {
console.log("正在唱歌！");
};
//一般情况下，我们将公共属性定义到构造函数里面；
//将公共的方法放到原型对象上面。
var xs = new Star2('xs',18);
var zj = new Star2('zj',20);
xs.sing();
zj.sing();
console.log(xs.sing === zj.sing);//true
// 1.原型是什么?
// 一个对象，我们也称为prototype为原型对象。
// 2.原型的作用是什么?
// 共享方法。
// 对象都会有一个属性_proto_指向构造函数的prototype原型对象，
// 之所以我们对象可以使用构造函数prototype原型对象的属性和方法，
// 就是因为对象有_proto_原型的存在。
function Star3(name,age) {
this.name = name;
this.age = age;
}
Star3.prototype.sing = function () {
console.log("正在唱歌！");
};
var xw = new Star3('xw',21);
console.log(xw);//输出如下：
// Star3 {name:"xw",age:21}
// age: 21
// name: "xw"
// __proto__:Object
//对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象
// _proto_ 对象原型 和 原型对象prototype是等价的。
console.log(xw.__proto__ == Star3.prototype);//true
//方法的查找规则:首先先看xw对象身上是否有sing方法,
// 如果有就执行这个对象上的sing
//如果没有sing这个方法,因为有_proto__的存在,
// 就去构造函数原型对象prototype身上去查找sing这个方法
// proto_对象原型的意义就在于为对象的查找机制提供一个方响，或者说一条路线，
// 但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，
// 它只是内部指向原型对象prototype。
// 参考图一
function Star4(name,age) {
this.name = name;
this.age = age;
}
Star4.prototype.sing = function () {
console.log("唱歌！");
};
Star4.prototype.dance = function () {
console.log("跳舞！");
};
var ljj = new Star4('ljj',22);
console.log(Star4.prototype);
console.log(ljj.__proto__);
//两者输出相同 如下：
// Object
// dance: ƒ ()
// sing: ƒ ()
// constructor: ƒ Star4(name,age)
// __proto__: Object
//里面都有constructor，包含着我们的构造函数。
// 对象原型(_proto_)和构造函数(prototype )原型对象里面
//都有一个属性constructor属性，
// constructor我们称为构造函数，因为它指回构造函数本身。
//constructor主要用于记录
// 该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
//所以当我们输出constructor时，会输出引用的构造函数。 如下：
console.log(Star4.prototype.constructor);
console.log(ljj.__proto__.constructor);
//两者输出相同 如下：
// ƒ Star4(name,age) {
// this.name = name;
// this.age = age;
// }
//上面构造的Star4中含有 sing dance 方法，如果我们需要更多方法时，
//可以这样写 如下（Star5）：
function Star5(name,age) {
this.name = name;
this.age = age;
}
Star5.prototype = {
sing:function () {
console.log("唱歌！");
},
dance:function () {
console.log("跳舞！");
}
};
var ls = new Star5('ls',23);
console.log(Star5.prototype.constructor);
console.log(ls.__proto__.constructor);
//两者输出相同 如下：
// ƒ Object() { [native code] }
//他并没有输出我们的构造函数，为什么呢？
//原因：Star4.prototype.sing，这里用的是 .sing ,意思是
//将sing方法添加到prototype对象。
//Star5.prototype = {} ，这样写将原本的prototype全部覆盖掉了，
// 就比如 a = 1；然后又写了 a = 2； 那么 a 就不可能是 1 了
//如何解决这种情况呢？
//我们需要手动的利用 constructor 这个属性指会原来的构造函数。
//如下（Star6）：
function Star6(name,age) {
this.name = name;
this.age = age;
}
Star5.prototype = {
//如果我们修改了原来的原型对象，并且是以对象的形式给原来的对象赋值
//则必须手动的利用constructor指回原来的构造函数。
constructor:Star6,
sing:function () {
console.log("唱歌！");
},
dance:function () {
console.log("跳舞！");
}
};
var ps = new Star6('ps',24);
console.log(Star6.prototype.constructor);
console.log(ps.__proto__.constructor);
//两者输出相同 如下：
// ƒ Star6(name,age) {
// this.name = name;
// this.age = age;
// }
}
</script>
</head>
<body>
</body>
</html>