ES5常用的组合继承及原型链理解

最新推荐文章于 2024-11-02 12:42:04 发布

浅香沉木

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量132

点赞数

文章标签： javascript prototype 原型链

本文链接：https://blog.csdn.net/Java_53/article/details/115274033

版权

本文详细解析了ES5中的组合继承方式，包括如何通过`Parent.call(this, name)`实现子类继承父类的构造方法，以及通过`Child.prototype = new Parent()`设置子类原型为父类实例。同时，深入探讨了原型链的工作原理，展示了实例通过`__proto__`属性查找方法的过程，并通过代码示例展示了属性和方法的访问、实例关系验证以及复合数据类型的独立性。

摘要由CSDN通过智能技术生成

ES5常用的组合继承及原型链理解

<!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>ES5常用的组合继承及原型链理解</title>
</head>

<body>

</body>
<script>
    // ES5常用的组合继承
    // 父类构造方法
    function Parent(name) {
        this.name = name;
        this.nums = [1, 2, 3, 4]
    }
    Parent.prototype.log_Parent = function () {
        console.log('parent姓名:' + this.name);
    }
    // 子类构造方法
    function Child(name, age) {
        Parent.call(this, name);//继承关键1:子类的构造方法沿用父类的构造方法
        this.age = age;
    }
    Child.prototype = new Parent();//继承关键2:子类的构造函数原型用父类的一个实例赋值
    Child.prototype.log_Child = function () {
        console.log('Child姓名:' + this.name);
        console.log('Child年龄:' + this.age);

    }

    // 声明子类实例
    let c2 = new Child('小红', 20);

    

    // 原型链
    console.log('--------------- 原型链 ---------------');
    console.log(Child);//Child构造函数
    console.log(Child.prototype);//Child构造函数生成的原型对象
    console.log(Child.prototype.constructor);//Child构造函数生成的原型对象访问构造函数
    let c1 = new Child('Child类的一个实例', 1);//如果继承Parent类则也是Parent类的一个实例
    console.log('----- Child类的一个实例，一直点__proto__属性看看 -----');
    console.log(c1);//Child类的一个实例,实例调用一个方法(或属性),若实例成员中没有,浏览器会自动访问__proto__对象,若没有找到还会再访问__proto__对象里面的__proto__对象直到找到此方法后执行并结束查找或一直到达最顶层的null也没有找到此方法同样结束自动查找调用，这是浏览器对ES5原型链支撑的一个重要的机制
    console.log(c1.__proto__);//c1访问Child原型，默认等于Child.prototype,由于继承父类一般又被赋值为new Parent()
    console.log(c1.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型
    console.log(c1.__proto__.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型再访问祖先Object原型
    console.log(c1.__proto__.__proto__.__proto__.__proto__);//c1访问Child原型再访问父类Parent原型再访问祖先Object原型然后就只有null了
    console.log(new Parent('Parent类的一个实例'));//父类的实例，赋值给Child.prototype，自然会与c1.__proto__相同
    console.log(Parent.prototype);//父类的原型
    console.log(Parent.prototype.constructor);//父类原型的构造函数
    console.log('--------------- ---------------');


    c1.log_Child();//Child姓名:Child类的一个实例  Child年龄:1
    c2.log_Parent();//parent姓名:小红
    console.log(c1.age); // 1
    console.log(c2.age); // 20 
    c1.nums.push(9);// [1,2,3,4,9]
    console.log(c1.nums);  // [1,2,3,4,9]
    console.log(c2.nums); // [1,2,3,4]  复合型数据有独立空间，未被其它实例干扰
    console.log(c1 instanceof Child); // true
    console.log(c1 instanceof Parent); // true c1既是Parent的实例，也是Child的实例

</script>

</html>