js原型对象prototype

堆&栈:
两者都是存放临时数据的地方。
栈是先进后出的，就像一个桶，后进去的先出来，它下面本来有的东西要等其他出来之后才能出来。
堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。对于堆，我们可以随心所欲的进行增加变量和删除变量，不用遵循次序。
栈区（stack） 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。
堆区（heap） 一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。

1.原型只在内存中创建一次而构造函数是new一次创建一次

function Product() {
        this.name='';
        this.price=0;
    }
    //只在内存中保存一份  原型是公用的
    Product.prototype={
        buy:function(){
            alert(this.name+"价格："+this.price);
        }
    }
    //内存中拷贝一份
    var iphone = new Product();
    iphone.name='iphone8';
    iphone.price=9000;
    //内存中拷贝一份
    var xiaomi = new Product();
    xiaomi.name="xiaomi7";
    xiaomi.price=2800;

    iphone.buy();
    xiaomi.buy();
    Product.prototype.buy();

2.属性搜索理论

属性搜索机制----先在自身属性列表中寻找，如果找到直接返回，找不到就从原型中寻找

function Product() {
        this.name='xiaomi';
        this.price=0;
    }
    //只在内存中保存一份  原型是公用的
    Product.prototype={
        name:'huawei',
        buy:function(){
            alert(11);
        }
    }

    //内存中拷贝一份
    var iphone = new Product();
    iphone.name='iphone8';
    iphone.price=9000;
    console.log(iphone.name);//iphone8
    //内存中拷贝一份
    var xiaomi = new Product();
    xiaomi.price=2800;
    console.log(xiaomi.name);//xiaomi

3.属性屏蔽机制

当构造函数和原型都有相同的属性时，原型的属性被屏蔽，如果想访问原型的，要加上prototype,通过构造函数获取自身原型属性Product.prototype.name；或者通过delete清除自身属性列表中的属性

function Product() {
        this.name='xiaomi';
        this.price=0;
    }
    //只在内存中保存一份  原型是公用的
    Product.prototype={
        name:'huawei',
        buy:function(){
            alert(11);
        }
    }

    //内存中拷贝一份
    var iphone = new Product();
    iphone.name='iphone8';
    iphone.price=9000;
    //屏蔽
    delete iphone.name;
    console.log(iphone.name);
    //内存中拷贝一份
    var xiaomi = new Product();
    xiaomi.price=2800;
    console.log(Product.prototype.name);

4.hasOwnProperty判断是不是自身的属性

function Product(){
        this.name='';
    }
    Product.prototype={
        img:{
            smallimg:"",
            bigimg:""
        }
    }
    var product =new Product();
    console.log(product.hasOwnProperty("name"));//true
    console.log(product.hasOwnProperty("img"))//false

5.字面量hasOwnProterty

    var product = {
        name:'',
        price:0,
        img:{
            small:"",
            big:""
        }
    }
    console.log(product.hasOwnProperty("name"));//true
    console.log(product.hasOwnProperty("img"));//true
    console.log(product.hasOwnProperty("big"));//false
    console.log(product.img.hasOwnProperty("big"));//true

7.for in 遍历对象属性

   /*普通对象模型*/
    function Product(){
        this.name="ww";
        this.price=22;
        this.buy=function(){};
    }
    Product.prototype={
        data:'2018/3/29'
    }
    var product = new Product();
    for(var a in product){
        console.log(a); // name  price  buy  data
    }
    for(var a in product){
        if(product.hasOwnProperty(a)){
            console.log(product[a]);//ww  22  f(){}
        }
    }

    var person = {
        name:"xiaoming",
        age:22,
        bike:function(){}
    }
    for(var a in person){
        console.log(a);//name  age  bike
    }
    for(var a in person){
        if(person.hasOwnProperty(a)){
            console.log(a);//name  age  bike 
        }
    }

8.面试题

   var fun = function(){}
    fun.prototype = {
        info : {
            name : 'peter',
            age : 25
        }
    }

    var a = new fun();
    var b = new fun();
    a.info.name = 'jack';
    b.info.name = 'tom';
    //用到了同一个原型  把原型的值改变了
    console.log(a.info.name)//tom
    console.log(b.info.name)//tom