JavaScript 继承,原型继承

时间：2022-08-24 23:53:25


demo.html(不使用原型,直接继承)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //当前没有的属性和方法，别人有，拿过来用 ，就是继承

        var o = {  // 子类对象。

        }

        var parent = {   // 要继承的对象。
            name :"张三",
            age : 18,
            sayHello :function () {
                console.log("Hello world");
            }
        }

        //混入式继承
        for(var k  in parent){
            o[k] = parent[k];
        }

        console.log(o);

    </script>
</head>
<body>

</body>
</html>


demo.html（使用原型继承的三种方式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //原型继承(往子类原型中添加要继承的属性和方法)

        //原型继承的三种方式
        //一、给子类的原型对象中添加成员（通过对象的动态特性） 不是严格意义上的继承
        function Person(name, age){
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHello = function () {   // 直接为子类原型添加要继承的方法。
            console.log("我想死你了");
        }

        var p = new Person("冯巩",50);
        p.sayHello();

        //这里的p对象就继承原型


//////////////////////////////////////////////////////////////////////
        //二、直接替换原型对象
        function Person(name, age){
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHi = function () {
            console.log("Hey man");
        }

        var parent = {
            sayHello : function () {
                console.log("我想死你了");
            }
        }
//
        Person.prototype = parent;   // 直接为子类原型替换成要继承的对象。 原型原有的成员会丢失。

        var p = new Person("冯巩",50);
        p.sayHello();
//        p.sayHi();  替换之后，sayHi方法不复存在

        //p对象继承了原型对象（parent对象）
        //注意：使用替换原型的方式实现继承的时候，原型中原有的成员就会丢失


/////////////////////////////////////////////////////////////////////////
        //三、利用混入的方式(for in 遍历)给原型对象添加成员
       function Person(name, age){
           this.name = name;
           this.age = age;
       }

       Person.prototype.sayHi = function () {
           console.log("Hey man");
       }

       var parent = {
           sayHello : function () {
               console.log("我想死你了");
           }
       }

       for(var k in parent){
           Person.prototype[k] = parent[k];   // 通过for遍历添加要继承的方法/属性  (用k赋值时,要用[],不能用点语法)
       }

       var p = new Person("冯巩",50);
       p.sayHello();

        //也是实现了继承 p继承自原型对象

    </script>
</head>
<body>

</body>
</html>




标签：

相关文章