js基础之（3）-prototype

最新推荐文章于 2024-06-10 21:57:03 发布

missasd1

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量79

点赞数

分类专栏：前端文章标签： prototype 原型链 javascript

本文链接：https://blog.csdn.net/missasd1/article/details/117858028

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用构造函数创建对象

对于构造函数，一般不允许对已经定义好的构造函数添加新的属性或函数。

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

var person1 = new Person("Tom", "Calancy", 50, "blue");
// 创建对象 person1

但我们可以通过原型类进行设置。

prototype 原型

原型链

当访问一个对象的属性时，它不仅在该对象上寻找，还会搜索该对象的原型，以及该对象的原型和原型，直到找到匹配的属性或到达原型链的末尾。
js所有对象，都是位于原型链顶端的Object的实例。
js所有对象，都从一个 prototype （原型对象）中继承属性和方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js prototype原型</title>
</head>
<body>

    <div>

        <div>
            <h2>js prototype (原型对象)</h2>
            <p>所有的js对象都会从一个 prototype （原型对象）中继承属性和方法。</p>
            <h2> prorotype 继承</h2>
            <ul>
                <li>Date 对象从 Date.prototype 继承属性和方法</li>            
                <li>Array 对象从 Array.prototype 继承属性和方法</li>            
                <li>Person 对象从 Person.prototype 继承属性和方法</li>            

            </ul>
            <p>所有的js对象都是位于原型链顶端的 Object 的实例</p>
            <p> js对象有一个指向原型对象的链。</p>
            <p>当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾</p>
            <p>Date对象、Array对象、以及Person对象从Object.prototype 继承。</p>
        </div>

        <div>
            <h3>添加新的属性</h3>
            <p>使用prototype属性可以给对象的构造函数添加新的属性</p>
        </div>

        <div>
            <h3>添加新的方法</h3>
            <p>使用prototype给对象的构造函数添加新的方法<p>
        </div>

    </div>

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

        Person.prototype.nationality = "English";

        var myFriend = new Person("John", "Doe", 50, "blue");
        console.log(myFriend); // Person {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}
        console.log(myFriend.nationality); // English

        // 使用prototype添加新的方法
        Person.prototype.name = function() {
            return this.firstName + " " + this.lastName;
        };

        console.log(myFriend.name());
    </script>


    
</body>
</html>

missasd1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础之（3）-prototype

使用构造函数创建对象对于构造函数，一般不允许对已经定义好的构造函数添加新的属性或函数。function Person(firstName, lastName, age, eyeColor) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.eyeColor = eyeColor;}var person1 = new Person("Tom", "Calancy", 50, "blue")
复制链接

扫一扫