js: 原型、原型链、继承

最新推荐文章于 2025-04-10 00:06:19 发布

原创最新推荐文章于 2025-04-10 00:06:19 发布 · 93 阅读

CC 4.0 BY-SA版权

本文深入探讨了JavaScript中的原型和继承机制，详细解释了本地属性与原型属性的区别，以及如何通过原型链实现继承。同时，提供了实用的方法，如使用Object.getPrototypeOf获取原型，构造函数检测原型，以及如何检测私有属性。

当前对象:

本地属性 -> 私有属于: 本地属性被修改，只有当前对象的该属性被修改

原型对象:

原型属性 -> 公共属性: 原型属性被修改，所有对象的该属性被修改

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>原型、原型链、继承</title>
</head>
<body>
    <script>
       function Book() {
           this.name = "book";
           this.page = 10;
           Book.prototype.author = "fanghuayong";
        }
        var book1 = new Book();
        var book2 = new Book();
    </script>
</body>
</html>

继承原则:

本地有的用本地
本地没有的找原型
原型没有的找原型对象的原型(简称: 原型链)

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>原型、原型链、继承</title>
</head>
<body>
    <script>
        function CountryMake() {
            this.country = "China"
        }
        function Author() {
            this.author = "fanghuayong";
        }
        Author.prototype = new CountryMake();
        function Book() {
            this.name = "book";
            this.page = 10;
        }
        Book.prototype = new Author();

        var book1 = new Book();
        var book2 = new Book();
    </script>
</body>
</html>

实用方法:

一. 获得原型: Object.getPrototypeOf

使用这个方法this指向原型，可以修改原型对象上的属性，如果直接使用实列来修改，修改的则会成本地属性，使用该方法修改的是原型对象上的属性。

        function CountryMake() {
    this.country = "China"
 }
 function Author() {
     this.author = "fanghuayong";
 }
 Author.prototype = new CountryMake();
 function Book() {
     this.name = "book";
     this.page = 10;
 }
 Book.prototype = new Author();

 var book1 = new Book();
 var book2 = new Book();

 var bookPrototype = Object.getPrototypeOf(book1);
 var authorPrototype = Object.getPrototypeOf(bookPrototype);

二. 构造函数检测原型: 构造函数.isPrototypeOf(对象)

如果book1实列中包含对应(比如Author、CountryMake等)原型链上的属性，则返回true，反之false

        var book3 = {} // 增加一个不是从Book构造函数new的对象book3

三: for/in ->可枚举属性，包括原型。

        for(var i in book1) {
    console.log(i + " : " + book1[i])
}

四.　检测私有属性.hasOwnProperty，是则返回true，反之false

五: Object.getOwnPropertyNames可以返回私有属性的所有(包括不可枚举)名称，并放在一个数组中。

六: Object.key可以返回可枚举私有属性的名称