一篇文章带你了解JavaScript对象原型

开发 前端
每一个JavaScript对象有一个原型,prototype也是一个对象。所有的JavaScript对象继承的属性和方法从它们的prototype。

每一个JavaScript对象有一个原型,prototype也是一个对象。所有的JavaScript对象继承的属性和方法从它们的prototype。

一、JavaScript 原型

使用对象字面量创建对象,或者使用new Object(),从一个称作Object.prototype的原型(prototype)继承。使用 new Date()创建对象,继承Date.prototype。

Object.prototype 是原型链的顶级原型。所有的JavaScript对象(Date, Array, RegExp, Function, ....) 都继承Object.prototype。

1. 创建一个原型

创建对象原型的标准方法是使用对象构造函数:

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

使用构造函数,可以使用new关键字从同一原型创建新对象。

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sall", "Rally", 60, "green");

构造函数是Person对象的原型,用大写字母命名构造函数是很好的做法。

完整代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">
        <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("Sall", "Rally", 60, "green");


            document.getElementById("demo").innerHTML =
                "My father is " + myFather.age + ". My mother is " + myMother.age;
</script>
    </body>
</html>

图片

2. 原型添加属性

不能将新属性添加到原型中,就像将新属性添加到现有对象一样,因为该原型不是现有对象。

Person.nationality = "Chinese";

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

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

原型属性可以有原型值(默认值)。

3. 为原型添加方法

构造函数也可以定义方法:

<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.name = function() {
            return this.firstName + " " + this.lastName
        };
    }


    var myFather = new Person("John", "ele", 50, "blue");
    document.getElementById("demo").innerHTML =
    "My father is " + myFather.name();
</script>

二、向对象添加属性和方法

有时,希望向现有对象添加新属性,(或方法),希望将新属性(或方法)添加到给定类型的所有现有对象中,您向对象原型添加新属性(或方法)。

1. 向对象添加属性

向现有对象添加新属性很容易。

myFather.nationality = "English";

属性将被添加到myFather,不是myMother,也不是任何其他person对象。

2. 向对象添加方法

向现有对象添加新方法也很容易:

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

方法将被添加到myFather。不是myMother。

三、使用 prototype 属性

JavaScript prototype属性允许你为一个已经存在的原型添加新的属性:

<script>
  function Person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
  }
  Person.prototype.nationality = "Math";


  var myFather = new Person("John", "Doe", 50, "blue");
  document.getElementById("demo").innerHTML =
  "My father is " + myFather.nationality;
</script>

图片

JavaScript原型属性还允许您添加新的方法对现有的原型:

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


    var myFather = new Person("name", "oe", 50, "blue");
    document.getElementById("demo").innerHTML =
    "My father is " + myFather.name();
</script>

图片

只修改你设定的自己原型。不修改标准的JavaScript对象的原型。

四、总结

本文基于JavaScript基础。介绍了JavaScript对象原型的基础知识点。如何在原型的基础上添加属性和方法。如何在对象在添加属性和方法。以及使用prototype属性允许你为一个已经存在的原型添加新的属性。每个模块都做了详细讲解,代码的展示。

使用编程语言,希望能够帮助你学习。

责任编辑:华轩 来源: 前端进阶学习交流
相关推荐

2023-07-25 16:06:57

JavaScript对象

2023-08-27 15:18:17

JavaScriptRegExp

2021-07-02 10:00:50

JavaScriptObject 函数

2023-07-06 14:40:38

2020-10-22 09:08:34

JavaScript

2021-01-29 18:41:16

JavaScript函数语法

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2023-07-30 15:18:54

JavaScript属性

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-05 18:04:15

JavaScript循环代码

2024-01-30 13:47:45

2021-03-09 14:04:01

JavaScriptCookie数据

2021-06-24 09:05:08

JavaScript日期前端

2023-06-06 15:45:40

JavaScript数组

2021-11-26 11:10:07

JavaScript 节点导航

2021-04-20 11:20:24

Java开发运算符
点赞
收藏

51CTO技术栈公众号