js 中的继承

面试的时候总是被问到js的继承,平时都是应用,最近有时间就把js 的继承整理了一下,和java 中的继承做了一下比较,代码如下:

js继承有5种实现方式:

1、对象冒充
<script>
 
function Parent(username){ 
    this.username = username; 
    this.hello = function(){ 
      alert(this.username); 
    } 
  } 
  function Child(username,password){ 
    //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承 
    //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象, 
    //第二步:执行this.method方法,即执行Parent所指向的对象函数 
    //第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法 
    this.method = Parent; 
    this.method(username);//最关键的一行 
    delete this.method; 

    this.password = password; 
    this.world = function(){ 
      alert(this.password); 
    } 
  } 
  var parent = new Parent("zhangsan"); 
  var child = new Child("lisi","123456"); 
  parent.hello(); 
  child.hello(); 
  child.world(); 
</script>
2、继承第二种方式:call()方法方式
<script>
  /*
  call方法是Function类中的方法 
  call方法的第一个参数的值赋值给类(即方法)中出现的this 
  call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
  */

  function test(str){ 
    alert(this.name + " " + str); 
  } 
  var object = new Object(); 
  object.name = "zhangsan"; 
  test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str 

  function Parent(username){ 
    this.username = username; 
    this.hello = function(){ 
      alert(this.username); 
    } 
  } 
  function Child(username,password){ 
    Parent.call(this,username); 
    
    this.password = password; 
    this.world = function(){ 
      alert(this.password); 
    } 
  } 
  var parent = new Parent("zhangsan"); 
  var child = new Child("lisi","123456"); 
  parent.hello(); 
  child.hello(); 
  child.world(); 
</script>
3、继承的第三种方式:apply()方法方式
<script>
  /*apply方法接受2个参数, 
    A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this 
    B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数 
  */
  function Parent(username){ 
    this.username = username; 
    this.hello = function(){ 
      alert(this.username); 
    } 
  } 
  function Child(username,password){ 
    Parent.apply(this,new Array(username)); 
    
    this.password = password; 
    this.world = function(){ 
      alert(this.password); 
    } 
  } 
  var parent = new Parent("zhangsan"); 
  var child = new Child("lisi","123456"); 
  parent.hello(); 
  child.hello(); 
  child.world(); 
  </script>
4、原型方式继承
<script type="text/javascript">  
    function Person(name,age){  
        this.name=name;  
        this.age=age;  
    }  
    Person.prototype.sayHello=function(){  
        alert("使用原型得到Name:"+this.name);  
    }  
    var per=new Person("zhangsan",21);  
    per.sayHello(); //输出:使用原型得到Name:zhangsan  

      
    function Student(){}  
    Student.prototype=new Person("lisi",21);  
    var stu=new Student();  
    Student.prototype.grade=5;  
    Student.prototype.intr=function(){  
        alert(this.grade);  
    }  
    stu.sayHello();//输出:使用原型得到Name:lisi  
    stu.intr();//输出:5  
</script>

5、继承的第五种方式:混合方式 
  混合了call方式、原型链方式

 function Parent(hello){ 
    this.hello = hello; 
  } 
  Parent.prototype.sayHello = function(){ 
    alert(this.hello); 
  } 

  function Child(hello,world){ 
    Parent.call(this,hello);//将父类的属性继承过来 
    this.world = world;//新增一些属性 
  } 

  Child.prototype = new Parent();//将父类的方法继承过来 

  Child.prototype.sayWorld = function(){//新增一些方法 
    alert(this.world); 
  } 

  var c = new Child("zhangsan","lisi"); 
  c.sayHello(); 
  c.sayWorld();

今天到此为止吧

时间: 2024-12-27 06:51:45

js 中的继承的相关文章

js中的继承问题

1.继承的概念:把别人的拿过来变成自己的,但自己不受影响. 2.js中最基本的继承就是原型继承. 3.原型继承:通过修改子级构造函数的prototype指向父级构造函数的实例对象. function Animal(name){ this.name=name; this.favor=['eating','sleeping']; } Cat.prototype=new Animal('Kitty'); function Cat(color){ this.color=color; } var cat=

详细理解JS中的继承

正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承之前还要再说一下原型.原型之所以很重要,原因之一就是可以利用它来实现JavaScript的继承.重写一个函数的原型对象,将其指定为另一个函数的实例,这样便实现了一个简单的原型链继承. 看一个利用原型链来实现继承的基础例子: 1 function Super(){ 2 this.name='super

JS中对象继承方式

JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/2872629 方式一:对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使Parent构造函数称为Children的方法,然后调用它.Children会收到Parent的构造函数中定义的属性和方法. *** //父类构造函数 var P

JS 中的 继承

许多 OO 语言(面向对象语言)都支持两种继承方式:接口继承和实现继承.接口继承只继承方法名,而实现继承则继承实际的方法. JS只支持实现继承,主要是依靠原型链来实现的. 1.原型链 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针,如此层层递进,就构成了实例与原型的链条. 一种基本的模式: f

js中的继承2--原型继承

一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: function F(){ ;}alert(F.prototype instanceof Object) //true 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. function A(x){ this.x=x;}var obj=new A(1); 实

js中的继承1--类继承

继承:function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName(); Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Ani

浅谈JS中的继承

JavaScript本身是一种神马语言: 提到继承,我们常常会联想到C#.java等面向对象的高级语言(当然还有C++),因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象,即面向对象.JavaScript这门语言本身就是作为浏览器脚本语言的弱语言,伴随着没有类的概念,JavaScript就成为了一种基于对象的语言而不是面向对象的语言,面向对象就会存在继承,那么基于对象的JavaScript是如何继承的,老生常谈一下. JavaScript的4种继承方式: (1)原型继承 functio

js中的继承

实现原型链有一种基本模式,其代码大致如下: function A(){ this.property = true; } A.prototype.getAvalue = function(){ return this.property; }; function B(){ this.property = false; } //继承了A B.prototype = new A(); B.prototype.getBvalue = function(){ return this.property; };

快速理解JS中的继承与原型链

语言是用来表达的工具.当我们需要代指某个东西的时候,通常称其为一个对象.在编程语言中,对象并不像真实世界中那样随处可见,随口可以指代.通常我们只有少数的原生对象,剩下的,需要我们自己去创建.在Java语言中,创建一只会“咯咯咯”叫的鸡时,我们是这么做的: public class Chicken{ public void makeSound(){ System.out.println("咯咯咯"); } } Chicken littleChicken = new Chicken();