原型继承的实现和原型的替换

Bertha 。 2022-06-13 03:21 179阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //原型继承
            //利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承
            //这种实现继承的方式，就叫做原型继承
    
            //1.给原型对象中添加成员（通过对象的动态特性） 不是严格意义上的继承
            function Person(name, age){
                this.name = name;
                this.age = age;
            }
    
            Person.prototype.sayHello = function () {
                console.log("我想死你们了");
            }
    
            var p = new Person("冯巩",50);
            p.sayHello();
            //这里的p对象就继承了原型 （原型继承）
    
            //2.直接替换原型对象
            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对象）
            //注意：使用替换原型的方式实现继承的时候，原有原型中的成员就会丢失
    
            //3.利用混入的方式给原型对象添加成员
    //        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];
    //        }
    //
    //        var p = new Person("冯巩",50);
    //        p.sayHello();
    
            //也是实现了继承 p继承自原型对象
    
        </script>
    </head>
    <body>
    
    </body>
    </html>