js实现继承的几种方式

1.call(),apply()方法实现继承

call方法的第一个参数的值赋值给类(即方法)中出现的this
 call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

apply方法的第一个参数和call相同,第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

          function animal(username){
            this.username = username;
            this.sayHello = function(){
              alert(this.username);
            }
          }
          function dog(username,password){
            animal.call(this,username);

            this.password = password;
            this.sayPassword = function(){
              alert(this.password);
            }
          }
          var child = new dog("lisi","123456");
          child.sayHello();
          child.sayPassword();

上面代码就是用call来实现继承,由于call有能改变this的特点,所以可以来实现继承。而apply实现继承几乎和call是相似的,代码如下:

          function animal(username){
            this.username = username;
            this.sayHello = function(){
              alert(this.username);
            }
          }
          function dog(username,password){
            animal.apply(this,new Array(username));

            this.password = password;
            this.sayPassword = function(){
              alert(this.password);
            }
          }
          var child = new dog("lisi","123456");
          child.sayHello();
          child.sayPassword();

下面我们来介绍第二种实现继承的方式,利用原型链(prototype)来实现继承。

          function animal(){
          }
          animal.prototype.hello = "lisi";
          animal.prototype.sayHello = function(){
            alert(this.hello);
          }

          function dog(){
          }
          dog.prototype = new animal();      dog.prototype.constructor = dog;
          dog.prototype.password = "123456";
          dog.prototype.sayPassword = function(){
            alert(this.password);
          }

          var c = new dog();
          c.sayHello();
          c.sayPassword();

我们可以看到在dog方法里面,我们在dog.prototype下new了一个animal,目的是将animal中将所有通过prototype追加的属性和方法都追加到dog,从而实现了继承.

dog.prototype.constructor = dog;这句话是因为之前new了一下dog的constructor指向了animal,只要从新覆盖即可。

最后一种实现继承的方法对象冒充(不常用):

         function animal(username){
            this.username = username;
            this.sayHello = function(){
              alert(this.username);
            }
          }
          function dog(username,password){
            this.extend = animal;
            this.extend(username);
            delete this.metend;
            this.password = password;
            this.sayPassword = function(){
              alert(this.password);
            }
          }
          var dog = new dog("lisi","123456");
          dog.sayHello();
          dog.sayPassword();

这种方法叫做对象冒充。实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值。值得注意的是extend是一个自定义临时属性,在执行完函数一定要立即删除。

this.extend是作为一个临时的属性,并且指向animal所指向的对象,
执行this.extend方法,即执行animal所指向的对象函数
销毁this.extend属性,即此时dog就已经拥有了animal的所有属性和方法

时间: 2024-10-16 01:11:58

js实现继承的几种方式的相关文章

js 实现继承的几种方式

//js中实现继承的几种方式 //实现继承首先要有一个父类,先创造一个动物的父类 function Animal(name){ this.name = name; this.shoot = function(){ console.log("yelp"); } } //动物的原型 Animal.prototype.eat = function(food){ console.log(name+"吃"+food); } //1.实例继承 var dog = new Ani

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中的继承主要分四种,原型继承,构造函数继承,call/apply继承以及es6的extend继承.1.原型继承:原型继承主要利用js对象的prototype引用父类的构造函数来复制父类的方法. //定义一个Person类 function Person(name){ this.name=name; } //打招呼 Person.prototype.sayHello=function(){ alert("Hello,my name is "+this.nam

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

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

js原型继承的几种方式

1. 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承+构造函数继承) 4,原型式继承 5. 寄生组合式继承 一.原型链继承 function Show(){ this.name="run"; } function Run(){ this.age="20"; //Run继承了Show,通过原型,形成链条 } Run.prototype=new Show(); var show=new Run(); alert(show.name)//结果:ru

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

JS刷新窗口的几种方式

浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法 <script language=JavaScript> parent.location.reload(); </script> <script language=JavaScript> parent.location.reload(); </script> 弹出子页面 <script language=JavaScript> window.opener.location.reloa

javascript继承的两种方式

javascript继承的两种方式 1,原型链 1 <script type="text/javascript"> 2 function A() 3 { 4 this.name='a'; 5 } 6 function B() 7 { 8 9 } 10 11 12 B.prototype=new A(); 13 var obj=new B(); 14 15 alert(obj.name); 16 </script> 2,对象冒充 1 <script type