ES5的继承

最新推荐文章于 2024-09-10 06:15:30 发布

抬头第一眼，是天

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量99

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Mr_Ypp/article/details/127028723

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ES6继承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>Document</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        //原型身上的方法
        Person.prototype.eat = function(){
            console.log("吃");
        }
        //ES6继承ES5
        class Son extends Person{}

        //创建对象
        const s = new Son("张三",18);
        console.log(s);
        s.eat();
    </script>
</body>
</html>

ES5的原型继承

/* 
        缺点: 
            创建对象的时候,给属性赋值,不能直接的new出来
    */

<!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>Document</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.eat = function(){
            console.log("吃");
        }

        //子类
        function Son(){}
        //原型继承
        const p = new Person()
        // console.log(p);
        Son.prototype = new Person();
        
        let son = new Son();
        son.name = "张三"
        son.age = 18;
        console.log(son);
        son.eat();
    </script>
</body>
</html>

ES5的构造继承

/* 构造继承(call继承),构造继承不能继承方法,只能继承属性 */

<!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>Document</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.eat = function(){
            console.log("吃");
        }

        //子类
        function Son(name,age){
            //构造继承(call继承),构造继承不能继承方法,只能继承属性
            Person.call(this,name,age)
        }

        //创建一个儿子
        const son = new Son("张三",18)
        console.log(son);
    </script>
</body>
</html>

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>Document</title>
</head>

<body>
    <script>
       
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.eat = function () {
            console.log("吃");
        }
        //子类
        function Son(name,age) { 
            //构造继承(call继承)            
            Person.call(this,name,age)
        }
        //原型继承
        Son.prototype = new Person();

        //创建儿子实例对象
        const son = new Son("张三",18);
        console.log(son);
        son.eat();

    </script>
</body>

</html>