谈谈对javascript原型对象的理解

1.1函数原型对象
在js中，我们创建一个函数A，那么浏览器会在内存中创建一个对象B，而且每个函数都会默认有一个属性prototype
指向了这个对象，这个prototype的属性的值就是这个对象，这个对象B就是函数A的原型对象，简称函数的原型，这个原型对象B默认会有一个属性constructor指向了这个函数A,

声明一个函数，则这个函数会有一个默认属性叫prototype,而且浏览器会自动按照一定的规则创建一个对象，
这个对象会是这个函数的原型对象，prototype属性指向这个原型对象，
这个原型对象有一个属性叫constructor执行了这个函数
原型对象只有属性:constructor ，其他都是从Object继承而来

function Person(){

}
console.log(Person.prototype.constrcutor === Person);原型对象的属性constrcutor指向了函数自己本身

1.2使用构造函数创建对象
当把函数作为一个构造函数使用new 创建对象的时候，那么这个对象就会存在一个默认不可见的属性，来指向了构造函数的原型对象，这个不可见的属性我们可以用__proto__来表示

利用构造函数创建一个对象，则对象会自动添加一个不可见的属性，而且这个属性指向了构造函数的原型对象

说明:虽然p1实例对象使用的是Person构造函数，但是对象创建出来之后，其实p1对象已经与Person构造函数没有任何关系了，p1对象的__proto__属性是指向Person构造函数的原型对象
2.如果创建多个实例对象，则多个对象都会指向Person构造函数的原型对象
3.我们可以在原型对象中添加方法和属性，可以是实现数据共享，节省内存空间
4.我们访问p1中的属性，如果在p1对象中能找到，就直接返回,如果p1对象没有找到，则可以去p1对象中的__proto__属性指向的原型对象中找，如果能查找到就返回
5.如果在p1对象中添加属性name,则p1对象就屏蔽了原型中的属性name,在p1中没有办法访问到原型中的属性name
6.通过p1对象只能读取原型中的属性name的值，而不能修改原型中属性name的值，如p1.name ='里斯';并不是改变了原型中name的值，而是向p1对象中添加了属性name
function Person(){
}
var p1 = new Person()
Person.__proto__ === Person.prototype
Person.prototype.constrcutor === Person

function Person(){
	Person.prototype可以访问到原型对象
	//给Person函数中的原型对象添加一个属性name并且值是'张三'
	Person.prototype.name ='张三';
	Person.prototype.age = 20;
	var p1 = new Person();
	/*
	访问p1对象的属性name,虽然在p1对象中我们并没有明确的添加属性name,
	但是p1的__proto__属性指向的是原型中name属性name,
	这个时候不能通过p1对象删除name属性，只能删除在p1中删除的对象
	*/
	alert(p1.name);张三
	var p2 = new Person();
	alert(p2.name);张三
	//原型中的值没法修改，则在这个方法中直接在p1添加了新的属性name,然后在p1中无法再访问到原型中的属性
	p1.name = '李四';
	alert(p1.name);//李四

 	p2.__proto__ === Person.prototype  //true
 	p1.__proto__ === Person.prototype
 	
}

二、与原型有关的几个属性与方法
2.1prototype属性
prototype存在于构造函数中，其实任意函数都有，他指向了这个构造函数的原型对象

2.2 constrcutor 属性
constrcutor 属性存在于原型对象中，他指向了构造函数

function Person(){
	
}
alert(Person.prototype.constrcutor === Person);
var p1 = new Person();
使用instanceof操作符可以判断一个对象的类型
alert(p1 instanceof Person);//true

=====================================================================================
    function Person () {

    }
    直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
    /*
    Person.prototype = {
        constructor : Person    //让constructor重新指向Person函数
    }
    */
===========================================================================================
__proto__注意的问题
用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。
<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true

</script>
--------------------- 

2.4 hasOwnProperty()方法
可以用这个方法进行判断一个属性是否来自于对象本身

 function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex属性是直接在p1属性中添加，所以是true
    alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
    // name属性是在原型中添加的，所以是false
    alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
    //  age 属性不存在，所以也是false
    alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
--------------------- 
======================================================================================
​ in操作符用来判断一个属性是否存在于这个对象中。
但是在查找这个属性时候，现在对象本身中找，
如果对象找不到再去原型中找。换句话说，
只要对象和原型中有一个地方存在这个属性，就返回true

 function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 对象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //对象和原型中都不存在，所以false

--------------------- 

三、组合原型模型和构造函数模型创建对象
3.1 原型模型创建对象的缺陷
​ 原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

3.2构造函数模型创建对象的缺陷
function Person() {
this.name = “李四”;
this.age = 20;
this.eat = function() {
alert(“吃完东西”);
}
}
var p1 = new Person();
var p2 = new Person();
//每个对象都会有不同的方法
alert(p1.eat === p2.eat); //false

3.3用组合模式解决前面缺陷
原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点

//在构造函数中封装方法
function Person(name,age){
	this.name =name;
	this.age = age;
	
}
//原型对象中封装方法
Person.prototype.eat = function(){
	alert(this.name+food);
	
}
 Person.prototype.play = function (playName) {
        alert(this.name + "爱玩" + playName);
    }

    var p1 = new Person("李四", 20);
    var p2 = new Person("张三", 30);
    p1.eat("苹果");
    p2.eat("香蕉");
    p1.play("志玲");
    p2.play("凤姐");
============================================================================

四、动态原型模式创建对象
​ 前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

​ 动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

   //构造方法内部封装属性
    function Person(name, age) {
        //每个对象都添加自己的属性
        this.name = name;
        this.age = age;
        /*
            判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
            则把这个funcion添加到原型中。
            如果是function，则代表原型中已经有了这个方法，则不需要再添加。
            perfect！完美解决了性能和代码的封装问题。
        */
        if(typeof this.eat !== "function"){
            Person.prototype.eat = function () {
                alert(this.name + " 在吃");
            }
        }
    }
    var p1 = new Person("志玲", 40);
    p1.eat();