快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 3、继承的第三种方式,在Javascript中如何实现继承

3、继承的第三种方式,在Javascript中如何实现继承

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-02-01 23:17

在Javascript中如何实现继承关系的应用?Javascript继承概念:js是基于对象的,他没有类的概念,所以实现继承,需要使用js的原型prototype机制或者用applay和call方法实现。

JS的继承


本文实例讲述了js实现继承的5种方式。分享给大家供大家参考,具体如下:

1、原型链继承

JS里常用的两种继承:

  1. 原型链继承(对象间的继承)
  2. 类式继承(构造函数间的继承)

由于JS不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现。

我们可以简单的把prototype看作是一个模板,新创建的自定义对象都是这个模板(prototype)的一个拷贝(实际上不是拷贝而是链接,只不过这种链接是不可见,新实例化的对象内部有一个看不见的_proto_指针,指向原型对象)。

js可以通过构造函数和原型的方式模拟实现类的功能。另外,js类式继承的实现也是依靠原型链来实现的。

1、继承第一种方式:对象冒充

即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承

原型式继承与类式继承

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

为了让子类继承父类的属性,首先需要定义一个构造函数。然后,将父类的新实例赋值给构造函数的原型。

类式继承

类式继承是在子类型构造函数的内部调用超类型的构造函数。
严格的类式继承并不是很常见,一般都是组合着用:

function Super(){
this.colors=["red","blue"]
}
function Sub(){
Super.call(this);
}

原型式继承是借助已有的对象创建新的对象,将子类的原型指向父类,就相当于加入了父类这条原型链


2、继承第二种方式:call()方法方式

functionparent(){ this.name="garuda";}functionchild(){ this.sex="man"}child.prototype=newparent();//核心:子类继承父类,通过原型形成链条vartest=newchild();console.log;console.log;

原型链继承

为了让子类继承父类的属性(也包括方法),首先需要定义一个构造函数。然后,将父类的新实例赋值给个构造函数的原型:

function Parent(){
    this.name = 'mike';
}
function Child(){
    this.age = 12;
}
Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条

var text = new Child();
alert(text.age);
alert(text.name);//得到继承的属性
//继续原型链继承
function Brother(){
this.weight = 60;
}
Brother.prototype = new Child();//继续原型链继承

var brother = new Brother();
alert(brother.name);//继承了Parent和Child,弹出mike
alert(brother.age);//弹出12

以上原型链集成还缺少一环,那就是Object,所有的构造函数都继承Object。而继承Object是自动完成的,并不需要我们自己手动继承,那么他们的从属关系是怎样?


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

备注:在js中,被继承的函数称为超类型,继承的函数称为子类型。

确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。操作符instanceof和isPrototypeof()方法:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test是brother的超类 
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

只要是原型链中出现过的原型,都可以说是该原型链派生的实例的原型,因此,isPrototypeof()方法也会返回true
在js中,被继承的函数称为超类型(父类,基类也行),继承的函数称为子类型(子类,派生类)。使用原型继承主要由两个问题:
一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数。

借用构造函数(类式继承)

<script>
    function Parent(age){
        this.name = ['mike','jack','smith'];
        this.age = age;
    }

    function Child(age){
        Parent.call(this,age);
    }
    var test = new Child(21);
    alert(test.age);//21
    alert(test.name);//mike,jack,smith
    test.name.push('bill');
    alert(test.name);//mike,jack,smith,bill</script>

借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起,所以我们需要原型链+借用构造函数的模式,这种模式称为组合继承.


function test{ alert(this.name + " " + str);}var object = new Object();object.name = "zhangsan";test.call;//此时,第一个参数值object传递给了test类中出现的this,而第二个参数"langsin"则赋值给了test类的strfunction Parent{ this.username = username; this.hello = function(){ alert; }}function Child{ Parent.call; this.password = password; this.world = function(){ alert; }}var parent = new Parent;var child = new Child;parent.hello;child.world();

使用原型继承存在两个问题:一是面量重写原型会中断关系,使用引用类型的原型,二是子类型还无法给超类型传递参数

组合继承

<script>
    function Parent(age){
        this.name = ['mike','jack','smith'];
        this.age = age;
    }
    Parent.prototype.run = function () {
        return this.name  + ' are both' + this.age;
    };  
    function Child(age){
        Parent.call(this,age);//对象冒充,给超类型传参
    }
    Child.prototype = new Parent();//原型链继承
    var test = new Child(21);//写new Parent(21)也行
    alert(test.run());//mike,jack,smith are both21
    </script>

组合式继承是比较常用的一种继承方法,其背后的思路是:

使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。
call()的用法:调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])


3、继承的第三种方式:apply()方法方式

2、借用构造函数继承

原型式继承

这种继承借助原型并基于已有的对象创建新对象,同时还不用创建自定义类型的方式称为原型式继承

<script>
     function obj(o){
         function F(){}
         F.prototype = o;
         return new F();
     }
    var box = {
        name : 'trigkit4',
        arr : ['brother','sister','baba']
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4

    b1.name = 'mike';
    alert(b1.name);//mike

    alert(b1.arr);//brother,sister,baba
    b1.arr.push('parents');
    alert(b1.arr);//brother,sister,baba,parents

    var b2 = obj(box);
    alert(b2.name);//trigkit4
    alert(b2.arr);//brother,sister,baba,parents
</script>

原型式继承首先在obj()函数内部创建一个临时性的构造函数 ,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。

apply方法接受2个参数, A、第一个参数与call方法的第一个参数一样,即赋值给类中出现的this B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类所接受的参数

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:3、继承的第三种方式,在Javascript中如何实现继承

关键词: