JavaScript prototype原型用法

Posted 2022-04-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
;

更好的原型对象的文章

以上是关于JavaScript prototype原型用法的主要内容，如果未能解决你的问题，请参考以下文章

Js中的prototype的用法二

js构造函数中如何调用prototype内方法