js继承

拼搏现实的明天。 2021-12-22 02:43 281阅读 0赞

var animal=function(name){         //构造函数
        this.name=name;
        this.sayhello=function(){
    	alert("hi我是"+this.name);
        };
    }
    animal.prototype.shout=function(){     //prototype主要作用:给类增加一个新的属性或函数
        alert(this.name+"正在叫！");
    };
    animal.prototype.game=function(){
        alert(this.name+"正在玩耍！");
    };
    var dog=new animal("小黑");   //实例化
    dog.sayhello();
    dog.shout();
    dog.game();

一、原型继承

var animal=function(name){
        this.name=name;
        this.sayhello=function(){
    	alert("hi我是"+this.name);
        };
    }
    animal.prototype.shout=function(){
        alert(this.name+"正在叫！");
    };
    animal.prototype.game=function(){
        alert(this.name+"正在玩耍！");
    };
    var Dog=function(name){
        this.name=name;
        this.shout=function(){     //重写父类的函数
    	alert(this.name+"汪汪叫！");
        }	
    }
    Dog.prototype=Cat.prototype=new animal();
    
    var dog=new Dog("小黑");
    dog.sayhello();
    dog.shout();
    dog.game();
    var cat=new Cat("小白");
    cat.sayhello();
    cat.shout();
    cat.game();

animal是父类(或超类)，要继承于谁，谁就是父类(超类)

改进：专门写个函数，用来实现继承

var animal=function(name){
        this.name=name;
        this.sayhello=function(){
    	alert("hi我是"+this.name);
        };
    }
    Function.prototype.extends=function(superclass){           //extends是保留关键字，不能拿出来单独使用，如var extends=function(){}，而这里可以使用是因为他做为函数的属性添加上去
        this.prototype=new superclass();
    };
    
    animal.prototype.shout=function(){
        alert(this.name+"正在叫！");
    };
    animal.prototype.game=function(){
        alert(this.name+"正在玩耍！");
    };
    var Dog=function(name){
        this.name=name;
        this.shout=function(){
    	alert(this.name+"汪汪叫！");
        }	
    }
    Dog.extends(animal);
    
    var dog=new Dog("小黑");
    dog.sayhello();
    dog.shout();
    dog.game();
    var dog=new Dog("小白");
    dog.sayhello();
    dog.shout();
    dog.game();

二、call,apply继承(不完全继承)

var animal=function(name){
        this.name=name;
        this.sayhello=function(){
    	alert("hi我是"+this.name);
        };
    }
    animal.prototype.shout=function(){
        alert(this.name+"正在叫！");
    };
    animal.prototype.game=function(){
        alert(this.name+"正在玩耍！");
    };
    var Dog=function(name){
        animal.call(this,name);	
    }
    var dog=new Dog("小黑");
    dog.sayhello();
    dog.shout();
    dog.game();

输出：hi我是小黑

TypeError: dog.shout is not a function

通过call(apply)的方式，只能改变其this指向，通过prototype添加进去的方法，他是无法直接继承的

总结：call，apply这种方式的继承适用于没有prototype的类或者不需要继承prototype所添加属性或函数的类，因为call和apply函数只是实现了方法的替换，而没有对对象的属性和函数进行复制操作

原型继承，则可以继承所有的属性和函数

继承的属性，只有删除原有属性，才会输出继承的属性

转载于:https://www.cnblogs.com/zhangwenkan/p/3956620.html

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 js继承

js继承的几种方式 1原型链继承原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原

素颜马尾好姑娘i/ 2023年01月09日 12:42/ 0 赞/ 16 阅读

相关 JS继承

1.原型链继承 2.借用构造函数继承（经典继承） 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承既然要实现继承，那么首先我们得有一个父

ゞ浴缸里的玫瑰/ 2022年12月05日 00:50/ 0 赞/ 186 阅读

相关 js 继承

$(document).ready(initPage); function initPage() { extend(C

- 日理万妓/ 2022年07月21日 02:20/ 0 赞/ 207 阅读

相关 js--继承

每个类有3部分，第一部分是构造函数内的，供实例化对象复制用的第二部分是构造函数外的，直接通过点语法添加，这是供类使用的，实例化对象访问不到第三部分是类的原型中

╰半夏微凉°/ 2022年07月11日 01:47/ 0 赞/ 209 阅读

相关 js继承

1、prototype方式 var BaseClass = function () \{ this.name = "3zfp";

ゞ浴缸里的玫瑰/ 2022年06月09日 04:08/ 0 赞/ 189 阅读

相关 js继承

构造函数的原型继承 function qq(name,age) { this.name = name

你的名字/ 2022年05月11日 01:04/ 0 赞/ 229 阅读

相关 js继承:一网打尽js继承

转载：原地址：[https://mp.weixin.qq.com/s/NkxW367Znl5Hb47\_vv8Eeg][https_mp.weixin.qq.com_s_Nkx

刺骨的言语ヽ痛彻心扉/ 2022年03月12日 07:24/ 0 赞/ 268 阅读

相关 js继承

var animal=function(name){ //构造函数 this.name=name; this.sayhe

拼搏现实的明天。/ 2021年12月22日 02:43/ 0 赞/ 282 阅读

相关 js-----继承

1：创建的三种方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2021年09月20日 06:56/ 0 赞/ 377 阅读

相关 js继承

为何要继承希望子类对象拥有父类的属性和方法构造函数的继承 call写在子类构造函数中，将父构造函数中this指向由window指向子对象，并且执行父构造函数中

傷城~/ 2021年09月03日 06:53/ 0 赞/ 426 阅读