zoukankan      html  css  js  c++  java
  • js原型和原型链的简单理解

    构造函数创建对象:

    function Person()
    {
    
    }
    
    var person = new Person();
    person.name = 'Tian';
    console.log(person.name);    //Tian

    Person 就是一个构造函数,使用 new 创建了一个实例对象 person

    prototype

      每个函数都有一个 prototype 属性

      每一个 javaScript 对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型“继承”属性。

    function Person()
    {
    
    }
    
    //protoType是函数才会有的属性
    Person.prototype.name = 'Tian';
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.name);    //Tian
    console.log(person2.name);    //Tian

     proto

      每一个 javaScript 对象(null除外)都具有的一个属性叫 proto ,这个属性会指向该对象的原型

    function Person()
    {
    
    }
    
    var person = new Person();
    console.log(person.__proto__ === Person.prototype);    //true

     constructor

      每一个原型都有一个 constructor 属性指向关联的构造函数,实例原型指向构造函数

    function Person()
    {
    
    }
    
    console.log(Person === Person.prototype.constructor);  //true

    function Person()
    {
    
    }
    
    var person = new Person();
    console.log(person.__proto__ === Person.prototype); //true
    console.log(Person.prototype.constructor === Person); //true
    
    cosnole.log(Object.getPrototypeOf(person) === Person.prototype); //true

    实例与原型

    function Person()
    {
    
    }
    
    Person.prototype.name = 'Tian';
    
    var person = new Person();
    
    person.name = 'Anni';
    console.log(person.name); //Anni
    
    delete person.name;
    console.log(person.name); //Tian

      在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Anni。

      但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Tian。

    原型与原型

    var obj = new Object();
    
    obj.name = 'Tian';
    console.log(obj.name);   //Tian

     原型链

      

     javaScript 默认并不会复制对象的属性,相反,JavaScript只是在俩个对象之间创建一个关联,这样一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法更准确些。

  • 相关阅读:
    Red Hat Enterprise Linux 4 下安装 Oracle 10g [转]
    C# 轻松实现对窗体(Form)换肤[转]
    广州.NET俱乐部第一次活动安排暨动员书
    庆祝广州.net俱乐部成立暨迎接新成员暨讨论社区活动
    有感于广州.NET俱乐部的成立暨全体动员书
    如何在列表模板中增加一个计算列
    BI有感续
    BI有感
    列表属性查看器WebPart
    广州.NET第一次活动内容及演讲安排(本贴持续更新中)
  • 原文地址:https://www.cnblogs.com/tg666/p/12059205.html
Copyright © 2011-2022 走看看