• JavaScript prototype原型用法


    JavaScript对象原型

    所有JavaScript对象都从原型继承属性和方法。

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>js</title>
    <body>
    
    <h2>JavaScript 对象</h2>
    
    <p id="demo"></p>
    
    <script>
    function Person(first, last, age, eye) {
       this.firstName = first;
       this.lastName = last;
       this.age = age;
       this.eyeColor = eye;
    }
    
    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");
    
    document.getElementById("demo").innerHTML =
    "My father is " + myFather.age + ". My mother is " + myMother.age;
    </script>
    
    </body>
    </html>

    我们还了解到,您无法向现有对象构造函数添加新属性:

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>JavaScript对象</title>
    <body>
    
    <h2>JavaScript对象</h2>
    
    <p>您无法向构造函数添加新属性。</p>
    
    <p id="demo"></p>
    
    <script>
    function Person(first, last, age, eye) {
       this.firstName = first;
       this.lastName = last;
       this.age = age;
       this.eyeColor = eye;
    }
    
    Person.nationality = "English";
    
    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");
    
    document.getElementById("demo").innerHTML =
    "The nationality of my father is " + myFather.nationality;
    </script>
    
    </body>
    </html>


    要向构造函数添加新属性,必须将其添加到构造函数:

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>JavaScript对象</title>
    <body>
    
    <h2> JavaScript对象</h2>
    
    <p id="demo"></p>
    
    <script>
    function Person(first, last, age, eye) {
       this.firstName = first;
       this.lastName = last;
       this.age = age;
       this.eyeColor = eye;
       this.nationality = "English";
    }
    
    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");
    
    document.getElementById("demo").innerHTML =
    "我父亲的国籍是 " + myFather.nationality + ". 我母亲的国籍是: " + myMother.nationality;
    </script>
    
    </body>
    </html>

    原型继承

    所有JavaScript对象都从原型继承属性和方法:

    Object.prototype位于原型继承链的顶部:Date对象,Array对象和Person对象继承自Object.prototype。

    * Date 对象继承自 Date.prototype
    * Array 对象继承自 Array.prototype
    * Person 对象继承自 Person.prototype

    # 向对象添加属性和方法

    有时,您希望向给定类型的所有现有对象添加新属性(或方法)。有时您想要向对象构造函数添加新属性(或方法)。

    使用**原型**属性

    JavaScript prototype属性允许您向对象构造函数添加新属性:

    function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
    }
    Person.prototype.nationality = "English";

    JavaScript prototype属性还允许您向对象构造函数添加新方法:

    function Person(first, last, age, eyecolor) {
       this.firstName = first;
       this.lastName = last;
       this.age = age;
       this.eyeColor = eyecolor;
    }
    Person.prototype.name = function() {
       return this.firstName + " " + this.lastName;
    };

    更好的原型对象的文章

  • 相关阅读:
    Cassandra开发入门文档第三部分(非规范化关系结构、批处理)
    Cassandra开发入门文档第二部分(timeuuid类型、复合主键、静态字段详解)
    Cassandra开发入门文档第一部分
    Flume的Source、Sink总结,及常用使用场景
    Libgdx学习笔记:分享自己写的异步加载
    jquery easyui toolbar 分割线问题
    easyui datagrid设置fit: true后,页面显示不全的情况
    CentOS下安装JDK1.7
    CentOS 7搭建SVN服务器
    SWT中ole/activex实践--操作word的一个例子
  • 原文地址:https://www.cnblogs.com/jc2182/p/11248968.html
Copyright © 2020-2023  润新知