• 理解Javascript的Prototype


    在Javascript中创建对象主要分为三种方式

    1、

    var catA = {name: "Fluffy", color: "White", age: 0};
    

    2、

    var catB = Object.create(new Object());
    catB.name = "Fluffy";
    catB.color = "White";
    catB.age = 0;
    

    3、

    function Cat(name, color) {
      this.name = name;
      this.color = color;
    }
    Cat.prototype.age = 0;
    
    var catC = new Cat("Fluffy", "White");

     每个函数都有个prototype属性,这是一个对象。如果访问一个对象的属性,首先会在对象内部查找,如果再对象内部中找不到这个属性,会到原型中去找,以此类推。通过每个对象会有一个__proto__来指向prototype。如果对象不是new出来的,则__proto__为{}如

    catA.__proto__;
    Object { }
    

      

    catC.__proto__;
    Cat {age: 0}
    

      通过调用对象的hasOwnProperty可以判断非原型上定义的属性比如

    catC.hasOwnProperty("name");
    true
    
    catC.hasOwnProperty("color");
    true
    
    catC.hasOwnProperty("age");
    false

    改变函数原型对象的属性,会引起对象属性的变化比如。因为有函数new出来的对象中的__proto__指向的是同一个对象即函数的prototype属性。

    function Cat(name, color) {
      this.name = name;
      this.color = color;
    }
    Cat.prototype.age = 3;
    
    var fluffy = new Cat("Fluffy", "White");
    var scratchy = new Cat("Scratchy", "Black");
    
    fluffy.age;
    3
    
    scratchy.age;
    3
    
    Cat.prototype.age = 4;
    
    fluffy.age;
    4
    
    scratchy.age;
    4

    如果对象已经早已被new出来了,后来又改变了构造该对象函数的原型。则不会影响到原来对象的属性变化,因为__proto__还是指向原来的那个对象。 

    function Cat(name, color) {
      this.name = name;
      this.color = color;
    }
    Cat.prototype.age = 3;
    
    var fluffy = new Cat("Fluffy", "White");
    var scratchy = new Cat("Scratchy", "Black");
    
    fluffy.age;
    3
    
    scratchy.age;
    3
    
    Cat.prototype = {age: 4};
    
    fluffy.age;
    3
    
    scratchy.age;
    3
    
    var muffin = new Cat("Muffin", "Brown");
    
    muffin.age;
    4
    

    因为每个对象都有个__proto__属性来指向原型对象,因此如果改变通过该对象的__proto__可以改变原型的属性,从而影响其他已经或者即将new的对象。

    function Cat(name, color) {
      this.name = name;
      this.color = color;
    }
    Cat.prototype.age = 3;
    
    var fluffy = new Cat("Fluffy", "White");
    var scratchy = new Cat("Scratchy", "Black");
    Compare this example:
    
    fluffy.age = 4;
    
    fluffy.age;
    4
    
    scratchy.age;
    3
    To this example:
    
    fluffy.__proto__.age = 4;
    
    fluffy.age;
    4
    
    scratchy.age;
    4
    

    javascript 继承的实现

    function Animal(name) {
      this.name = name;
    }
    Animal.prototype.age=1;
    
    function Cat(name, color) {
      Animal.call(this, name);
      this.color = color;
    }
    Cat.prototype = new Animal(null);
    
    var catC = new Cat("Fluffy", "White");
    
    catC.name;
    Fluffy
    
    catC.color;
    White
    
    catC.age;
    1
  • 相关阅读:
    Android Studio快速导入项目
    梦断代码阅读笔记01
    Python词云生成
    Python 数据处理
    Android studio 自定义Dialog
    Android studio Activity的跳转和数据传递
    Android studio Handler消息处理2
    2.9 react组件中使用key作为prop属性命名报错
    2.3 上下margin值合并
    2.2 快速认识虚拟dom
  • 原文地址:https://www.cnblogs.com/dubaokun/p/3431025.html
Copyright © 2020-2023  润新知