zoukankan      html  css  js  c++  java
  • 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;
    };

    更好的原型对象的文章

  • 相关阅读:
    AWS 免费套餐
    UWP DEP0700: 应用程序注册失败。[0x80073CF9] 另一个用户已安装此应用的未打包版本。当前用户无法将该版本替换为打包版本。
    UWP 应用程序名称本地化以及商店显示名称本地化
    ES6知识整理(6)--Symbol函数
    【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息
    ES6知识整理(5)--对象的扩展
    ES6知识整理(4)--数组的扩展
    【移动端web】软键盘兼容问题
    ES6知识整理(3)--函数的扩展
    ES6知识整理(2)--变量的解构赋值
  • 原文地址:https://www.cnblogs.com/jc2182/p/11248968.html
Copyright © 2011-2022 走看看