zoukankan      html  css  js  c++  java
  • JavaScript 原型 prototype 使用经验

    初始化一个父类,并添加方法

    1function Foo(){}
    2Foo.prototype.sayName = function(){
    3    return '初始原型';
    4}
    5
    6var foo1 = new Foo();
    7foo1.sayName() //'初始原型'

    new方式重写原型;切断了新实例与原有原型之间的连接

     1function Bar(){}
    2Foo.prototype = new Bar(); // 重写原型
    3var foo2 = new Foo();
    4foo2.sayName();            // error 报错;找不到这个方法
    5
    6Bar.prototype.sayName = function(){
    7    return '第一次重写的原型';
    8}
    9
    10// 动态
    11foo2.sayName() // '第一次重写的原型'
    12var foo3 = new Foo();
    13foo3.sayName() // '第一次重写的原型'

    覆盖重写原型后定义的方法

    1Foo.prototype.sayName = function(){
    2    return '覆盖了新原型的方法'
    3}
    4
    5var foo4 = new Foo();
    6foo4.sayName() // '覆盖了新原型的方法'

    覆盖原型的方法,并不影响其他实例调用这个方法;

     1// 其他实例还会继续调用(覆盖前)原来的那个方法
    2var bar = new Bar();
    3bar.sayName() // '第一次重写的原型'
    4
    5// 对象字面量方式会重写原型对象; 切断了新实例与原有原型的连接
    6Foo.prototype = {
    7    getHeightfunction(){
    8        return '高度是2m'
    9    },
    10    getWeightfunction(){
    11        return '重量是1kg'
    12    }
    13}
    14// 相当于 Foo.property = new Object(); 然后再定义方法...
    15
    16var foo5 = new Foo();
    17foo5.sayName() // error报错;找不到这个方法
    18// 但原有的实例 还是能连接到 原有的原型
    19foo4.sayName() //'覆盖了新原型的方法'
    20
    21// 此时
    22Foo.prototype.__proto__ == Object.prototype // true

    prototype 的使用经验,主要是判断实例是在重写原型之前定义,还是重写原型之后定义的;

    1. 重写原型会切断 原有实例 与 现有原型 的连接
    2. 重写原型会切断 现有实例 与 原有原型 的连接

    记住一句话

    实例中的指针仅指向原型,而不指向构造函数

  • 相关阅读:
    Vue框架的两种使用方式
    转淘宝前端的一篇文章作备份
    分享两个细致、全面讲解Vue和React源码的链接
    网络慢。。。
    mysql的查询使用explain的讲解
    pv,uv的意义
    vi
    php中经常使用的string函数
    dirname(__FILE__) === __DIR__
    phpstorm开发环境搭建流程
  • 原文地址:https://www.cnblogs.com/rencoo/p/9383826.html
Copyright © 2011-2022 走看看