最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript 原型对象( Prototype )

    正文概述 掘金(吃凹吃凹)   2021-04-21   628

    什么是原型( Prototype )?

    Javascript规定,每一个函数都有一个 prototype 对象属性,指向另一个对象(原型链上面的)。

    什么叫原型链?

    顺着原型对象寻找对象的一条“链子”就叫做原型链:

    function Person(name,age){
      this.name = name
      this.age = age;
    }
    let me = new Person("chao","9");
    console.log(me.toString());
    

    me.toStirng 是怎么来的呢?

    1. 在 me 里找 toString 方法
    2. me 中显然没有,那么就去 me.__prote__ 里找
    3. me.__proto__ 也没有,那就去 me.__proto__.__proto__里找
    4. me.__proto__.__proto__下就有个 toString

    可以看下 me 的结构

    JavaScript 原型对象( Prototype )

    整个过程都围绕着 __proto__ 对象进行,所以叫原型链了(如果 num.__proto__.__proto 还没有,它将继续找到下一级的 __proto__ 直至找到 toString )。

    __proto__ 属性是对象所独有的

    prototype 属性是函数所独有的(函数也是对象,所以也有 __proto__ )。

    不同其他编程语言,JavaScript 可以通过原型对象使得每个对象实例拥有共同的对象(方法、属性)。

    我们用两种方法给一个对象添加方法:

    构造函数添加:

    function Person(name,age){
      this.name = name
      this.age = age;
      this.sayHello = ()=> console.log("Hello,my name is " + this.name);
    }
    let me = new Person("chao",9);
    let tom = new Person("Tom",32);
    console.log(tom.sayHello == me.sayHello);
    

    原型添加:

    function Person(name,age){
      this.name = name
      this.age = age;
    }
    //lambda 表达式获取不了 this (上面的例子中的 this 来自父作用域)
    Person.prototype.sayHello = function(){console.log("Hello,my name is " + this.name)};
    let me = new Person("chao",9);
    let tom = new Person("Tom",32);
    me.sayHello();
    

    利用构造函数添加的输出 False 而原型添加的却是 True。可以推测,利用原型添加的对象于每个实例中都是相同的。

    原型是 JavaScript 特有及优越之处。它可以有效地优化对象所占用的内存,因为每个方法都是共有的。

    JavaScript 原型对象( Prototype )

    Prototype 中可以添加任何对象,然后通过 obj.any 访问该对象:

    function Person(name,age){
      this.name = name
      this.age = age;
    }
    //添加 gender 属性
    Person.prototype.gender = "未知";
    //添加 sayHello 构造方法
    Person.prototype.sayHello = (name) => console.log("Hello,my name is " + name);
    //添加 Person 构造函数
    Person.prototype.Constructor = Person;
    
    let me = new Person("chao",9);
    
    me.gender = "男";
    console.log(me.gender);
    me.sayHello(me.name);
    let son = new me.Constructor("son","0");
    console.log(son.name);
    

    输出:

     男
     Hello,my name is chao
     son
    

    感觉向 prototype 添加对象时应该设计成一个方法,如:Add(obj)。obj.prototype.any = o 有点不好理解。

    当然,也许是我层次低了,哈哈哈?

    努力学习!✊


    起源地下载网 » JavaScript 原型对象( Prototype )

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元