zoukankan      html  css  js  c++  java
  • 怎样理解构造函数的原型对象prototype

    通过构造函数生成的实例对象中的属性和方法其实是从构造函数中"copy"一份后生成的, 也就是说虽然生成的对象是构造函数的实例, 但里面的属性和方法确实相互独立的, 比如下面的lilei.sayHi 和 hanmeimei.sayHi这两个方法虽然同名, 功能也一样, 但实际上是内存中的两个不同地址里的函数, 因此他们是不全等的. 

    function Person(name){
        this.name = name;
        this.sayHi = function(){
            console.log("Hi, I'm " + this.name);
        };
    }
    
    var lilei = new Person("Lilei");
    var hanmeimei = new Person("Hanmeimei");
    
    lilei.sayHi === hanmeimei.sayHi; // false

    而原型对象则实现了实例对象使用构造函数方法/属性的"统一" / "同源"调用. 直白地讲, 如果把上面代码中的sayHi()方法定义在原型对象上, 那lilei.sayHi 和 hanmeimei.sayHi 就是全等的.

    function Person(name){
        this.name = name;
    }
    
    Person.prototype.sayHi = function(){
        console.log("Hi, I'm " + this.name);
    };
    
    var lilei = new Person("Lilei");
    var hanmeimei = new Person("Hanmeimei");
    
    lilei.sayHi === hanmeimei.sayHi; // true

    打个比方, 母亲生了两个孩子, 孩1和孩2, 他们都有眼睛闭嘴耳朵嘴巴, 但这些并不是母亲的器官, 而是从母亲那里继承过来的, 但母亲有一个玩具, 是奶奶的, 这个玩具是唯一的, 但奶奶可以玩, 母亲也可以玩, 孩1和孩2也可以玩, 这里的玩具就是定义在奶奶这个构造函数的对象原型prototype上的一个属性, 这个属性可以被继承的实例对象所使用. 而非像眼睛鼻子这种需要复制一份.

  • 相关阅读:
    0.1+0.2!==0.3
    标准盒模型IE盒模型
    Vue自定义组件通过v-model通信
    vue-cli3.0 使用 postcss-pxtorem px转rem
    render函数、createElement函数
    mixins(混入)
    vue.extend与vue.component
    js事件系列
    vue脚手架项目结构
    python模块和包
  • 原文地址:https://www.cnblogs.com/aisowe/p/11670423.html
Copyright © 2011-2022 走看看