JS继承几种方式

1、原型继承
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function(){
alert("使用原型得到Name:"+this.name);
}
var per = new Person("dzk",21);
per.sayHello();//输出:使用原型得到Name:dzk

function Student(){}
Student.prototype = new Person("gw",22);
var stu = new Student();
Student.prototype.grade = 5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//输出:使用原型得到Name:gw
stu.intr();//输出:5
</script>
优点:
1、非常纯粹的继承关系,实例是子类是实例,也是父类的实例,如上stu
2、父类新增原型方法or原型属性,子类都能访问到
3、简单、易于实现
缺点:
1、无法实现多继承
2、来自原型对象的引用属性是所有实例共享的

2、构造函数继承
<script>
function Parent(name){
this.names = name;
this.sayParent=function(){
alert("Parent:"+this.names);
}
}
function Child(name,age){
this.tempfds = Parent;
this.tempfds(name);
this.age = age;
this.sayChild=function(){
alert("Child"+this.names+"age:"+this.age);
}
}

var parent=new Parent("江剑臣");    
parent.sayParent(); //输出:“Parent:江剑臣”  
    var child=new Child("李鸣",24);
    child.sayChild();  //输出:“Child:李鸣 age:24”  
</script>
优点:
1、解决了1中,子类实例共享父类引用属性的问题
2、可以实现多继承
缺点:
1、实例并不是父类的实例,只是子类的实例
2、无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3、Call、apply实现继承
<script>
function Person(name,age,love){
this.name = name;
this.age = age;
this.love = love;
this.say=function(){
  alert("姓名:"+name);  
}
}
//call方式
function Student(name,age){
Person.Call(this,name,age);
}
//apply方式     
function teacher(name,love){  
        //Person.apply(this,[name,love]);  
        Person.apply(this,arguments); //跟上句一样的效果,arguments  
    }

    //call与aplly的异同:  
    //1,第一个参数this都一样,指当前对象  
    //2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以)

var per=new Person("武凤楼",25,"魏荧屏"); //输出:“武凤楼”  
    per.say();  
    var stu=new student("曹玉",18);//输出:“曹玉”  
    stu.say();  
    var tea=new teacher("秦杰",16);//输出:“秦杰”  
    tea.say();

</script>

时间: 2024-08-24 05:07:08

JS继承几种方式的相关文章

JS继承的实现方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

原生js获得八种方式,事件操作

08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElem

js继承的常用方式

写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的. 我们都知道面向对象语言的三大特征:继承.封装.多态,但JavaScript不是真正的面向对象,它只是基于面向对象,所以会有自己独特的地方.这里就说说JavaScript的继承是如何实现的. 学习过Java和c++的都知道,它们的继承通过类实现,但JavaScript没有类这个概念,那它通过什么机

黄聪:异步加载JS的4种方式(详解)

方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).rea

js的5种继承方式——前端面试

js主要有以下几种继承方式:对象冒充,call()方法,apply()方法,原型链继承以及混合方式.下面就每种方法就代码讲解具体的继承是怎么实现的. 1.继承第一种方式:对象冒充 1 function Parent(username){ 2 this.username = username; 3 this.hello = function(){ 4 alert(this.username); 5 } 6 } 7 function Child(username,password){ 8 //通过以

js继承有5种实现方式

js继承有5种实现方式:1.继承第一种方式:对象冒充  function Parent(username){    this.username = username;    this.hello = function(){      alert(this.username);    }  }  function Child(username,password){    //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承    //第一步:this.method是作为一

js实现继承的5种方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 Js代码   function Parent(firstname) { this.fname=firstname; this.age=40; this.sayAge=func

js如何实现继承(js实现继承的五种方式)

js继承有5种实现方式: 1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承 //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对

JS实现继承的几种方式(转)

转自:幻天芒的博客 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原