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所指向的对象,
    //第二步:执行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();

2、继承第二种方式:call()方法方式
  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();

3、继承的第三种方式:apply()方法方式
  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();

4、继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承
  function Person(){
  }
  Person.prototype.hello = "hello";
  Person.prototype.sayHello = function(){
    alert(this.hello);
  }
  
  function Child(){
  }
  Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }
  
  var c = new Child();
  c.sayHello();
  c.sayWorld();

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-10-19 04:49:51

js如何实现继承的相关文章

js对象的继承

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> //继承 : 子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 ) //属性的继承 : 调用父类的构造函数 call //

JS 对象之继承

<!-- ————————JS对象之继承 ———————— --> //父类 function Sup(name){ this.name=name; } //父类的原型 Sup.prototype={ constructor:Sup, sayName:function(){ alert(this.name); } }; //子类构造函数 function Sub(age){ this.age=age; } //让子类的原型等于父类的实例 Sub.prototype=new Sup("

js最好的继承机制:用对象冒充继承构造函数的属性,用原型链继承 prototype 对象的方法。

js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB(sColor, sName) {//在 ClassB 构造函数中,用对象冒充继承 ClassA 类的 sColor 属性 ClassA.call(th

js模拟实现继承功能

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //js中模拟继承效果的案例 //函数对象中的三种“继承” 方式 汇总 //方式一 //****************************

JS创建对象、继承原型、ES6中class继承

面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,yingjiangyong等.每个实例表示具体的领导,他们 都属于Leader类型.ES6之前的版本中没有类和实例,是通过原型prototype完成面向对象编程.区别:JS中没有类和对象,所有的对象都是实例,只是把一个对象的原型指向另一个对象.//创建对象的第一种方法:.__proto__var Un

js 中的继承

面试的时候总是被问到js的继承,平时都是应用,最近有时间就把js 的继承整理了一下,和java 中的继承做了一下比较,代码如下: js继承有5种实现方式: 1.对象冒充 <script>   function Parent(username){      this.username = username;      this.hello = function(){        alert(this.username);      }    }    function Child(userna

JS面向对象之继承——原型链

原型对象 每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同.比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用. 原型链 由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefi

第21篇 js四种继承方式

js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法.继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承. 1.原型继承---最简单,最常用的 function funcA(){ this.show=function(){ console.log("hello"); } } function funcB(){ } funcB.prototype=new funcA(); var b=new funcB();

JS 面向对象之继承 -- 借用构造函数

转自 http://www.cnblogs.com/yangjinjin/archive/2013/02/01/2889519.html 上次讲到的原型链中,原型链存在一个问题就是不能向超类型的构造函数传递参数.那么这次就是要实现如何向超类型构造函数传递参数. 这种方法我们称之为借用构造函数(constructor stealing) 这里的实现方法是使用js的原生方法apply()或all().那么先温习下apply()和all()函数的知识. call方法: 语法:call([thisObj