2021-5-29 继承

最新推荐文章于 2024-05-24 09:34:18 发布

半个苹果

最新推荐文章于 2024-05-24 09:34:18 发布

阅读量51

点赞数

文章标签： prototype 继承

本文链接：https://blog.csdn.net/weixin_44629215/article/details/117388927

版权

本文深入探讨了JavaScript中的继承机制，包括子类如何继承父类的属性和方法。通过实例展示了如何使用call()和apply()方法改变父级构造函数的this指向，以及如何使用for...in循环实现原型继承。此外，还讲解了构造函数继承和原型链的构建，通过Hero和Person类的示例，阐述了如何实现属性和方法的继承。最后，通过实际代码运行，验证了继承的效果。

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

继承

子类可以继承父类的属性和方法
目的：找到共性，精简代码，提高重用性
属性的继承：
call（）和apply（）：改变父级构造函数的this指向
构造函数可以继承，用 for in 来完成原型的继承
事例：

<!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>继承</title>
</head>
<body>
    
</body>
<script>
    function Person(name,sex, age){
        //这些属于共有属性
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    //
    Person.prototype.smile = function(){
        console.log("哈哈")
    }
    // //不要这么写，这是一个浅拷贝
    // Hero.prototype = Person.prototype;

    //推荐使用  for  in来完成原型的继承
    for(x in Person.prototype){
        Hero.prototype[x] = Person.prototype[x];
    }
 
    Hero.prototype.go = function(){
        console.log("嗯嗯")
    }

    
    function Hero(name,sex,age,skill,country){
        //构造函数的继承
        // Person.call(this,name,sex,age);//一个后边是参数列表
        Person.apply(this,[name,sex,age])//一个后边是数组
        this.skill = skill;
        this.country = country;
        //new的是谁，this就指向的是谁
    }

    var zgl = new Hero("诸葛亮","男",18,"自带闪现","蜀国");
    var zy = new Person("周瑜","男",23,);

    zy.smile();
    // zgl.smile();//报错
    //采用for  in 来完成原型的继承，因为上边只完成了构造函数的继承
    console.log(zgl,zy);
</script>
</html>