Javascript中3种实现继承的方法和代码实例,继承实
分类:新闻中心

雄起雌伏是大家在贯彻面向对象编制程序的时候很器重的贰个手法。即使我们讲不能过度承继,多使用组合代表承袭,然则后续总是免不了的。这里要商讨的就是Javascript中的继承机制。

Javascript中3种达成连续的方法和代码实例,javascript实例

承接是咱们在促成面向对象编程的时候很主要的一个花招。就算大家讲无法过度承继,多采用组合代表承接,可是后续总是免不了的。这里要商讨的正是Javascript中的承袭机制。

Javascript中其实是从未有过承接的定义的,不过我们得以透过某个手腕来模拟完结它。这种持续实际上把三个对象复制到其他一个指标内部。你需求小心的是享有的地头类和宿主类是不能够当做基类被三番两次的,首假如为着安全方面包车型地铁牵挂。

Javascript中的承继差十分的少有三类:1.目的冒充;2.原型承继;3.二者的搅动。

一、对象冒充

实质上对象冒充是跟this关键字紧密联系在共同的(所以说充裕知情Javascript中的this关键字是何等的基本点:P)。构造函数使用this来给属性和方法赋值,而构造函数也得以看作为四个平常的函数,所以我们就能够使我们的基类的构造函数成为子类的构造函数,然后在子类的当中调用那几个函数,那么子类就能够得到父类的特性和措施。

规律很简短,那大家怎么落到实处啊?下边就以代码示例,实际的操作一下。

指标冒充完结格局一,大家最常用的新建对象的点子:

复制代码 代码如下:

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 this.myConstructor = classA;
 this.myConstructor(name);
 delete this.myConstructor;
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

为了证实以上的法子是还是不是精确,你能够亲身测量试验下,作者将测量检验用的代码写在底下:

复制代码 代码如下:

var objA = new classA('DK');
objA.alertName();//DK
 
var objB = new classB('DS',20);
 
objB.alertName();//DS
objB.alertAge();//20

那就是所谓的对象冒充了,别的对象冒充还应该有别的二种实现的措施,纵然它们的兑现手腕不雷同,不过它们的原理是一样的。

指标冒充达成情势二,使用call方法:

复制代码 代码如下:

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 classA.call(this,name);
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

透过代码也能看出来,第一种方法中大家新建了函数指针指向父类,调用函数,然后将指针删除。而那边我们之间用call方法在this对象下面运营父类的构造函数,达成了一致的目标。其余与call方法相对于的则便是apply方法啦。

目的冒充达成格局三,使用apply方法:

复制代码 代码如下:

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 classA.apply(this,new Array(name));
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

实在我们能够看看,apply方法跟call方法是特别类似的,只但是传递参数是略有分化罢了。

二、原型承袭

世家应该对prototype对象具备了然,原型对象上的装有属性和情势将被传送给类的具备实例,全体当大家把父类的保有属性和章程付给子类的prototype对象时也就一定于完毕了大家的再三再四。

子类想猎取父类的具有属性和办法,那我们将父类的二个实例直接提交子类的prototype对象,那大家的子类不就一定于获取了父类的具备指标和方法?

代码示例伺候:

复制代码 代码如下:

var classA = function(){
 this.name = 'DK';
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 this.name = name;
 this.age = age;
}
 
classB.prototype = new classA();
 
classB.prototype.alertAge = function(){
 alert(this.age);
}

小心这里的父类的构造函数要求保证没有参数。因为即使有协会参数在落实原型承袭的时候你也无从传递=.=!

三、混合承接

看名称就能够想到其意义,混合承袭便是前二种办法的名不副实使用了。

复制代码 代码如下:

var classA = function(name){
 this.name = name;
}
 
classA.prototype.alertName = function(){
 alert(this.name);
}
 
var classB = function(name,age){
 classA.call(this,name);
 this.age = age;
}
 
classB.prototype = new classA();
 
classB.prototype.alertAge = function(){
 alert(this.age);
}

利用对象冒充达成了向父类传递参数,同一时候使用原型承接完成了对国有方法的一而再。

说完了那三中三番两次格局了,上边该提起难题的时候了。

您只怕会不解,为啥有了目的冒充,有了原型承接还要再弄出个什么样混合承继,对,最首要的也正是其一难题。

1.只要您实际测量检验一下,你会发觉经过对象冒充的不二诀要完成的一连,子类是无法访问到父类的原型链上的法子的。

美高梅游戏官网网站,2.而用原型继承,则会把持有的质量改为分享的性质,假若您同三个子类达成三个实例,你会发觉你的享有实例分享全数的品质。

3.只是那必然是不适合的了。所以就有了混合承接的办法,让属性持续维持个人,同一时间让子类能够访问父类的原型链的秘籍。

你能够亲自动手试一下,在目的冒充承袭的时候,子类不能访谈父类的原型链方法,原型链承接子类的享有实例分享全数父类属性。这里作者就不写例子了。

上面笔者付出两种常用的法子:
1 .目标冒充
规律: 构造函数使用this关键字给持有属性和方法赋值, 因为构造函数只是叁个函数,所以能够使ClassA的构造函数成为classB的诀窍,然后调用它.那样classB就能接收classA的构造函数中定义的天性和方法.例子:

上边我付诸两种常用的点子:
1 .对象冒充
规律: 构造函数使用this关键字给持有属性和方法赋值, 因为构造函数只是贰个函数,所以可以使ClassA的构造函数成为classB的措施,然后调用它.这样classB就可以接收classA的构造函数中定义的习性和方法.例子:

Javascript中其实是从未承继的定义的,然而大家得以经过有些手段来效仿完结它。这种持续实际上把三个对象复制到其它贰个目的内部。你供给当心的是享有的地头类和宿主类是无法当做基类被一而再的,重借使为了安全方面包车型大巴设想。

[javascript练习]子类传承父类方法并延时实例化

在firefox中能够用Console调试 (Ctrl+Shift+K):
console.log( var1, var2, var3 ...)在Web Console 中会展现var1 var2 var3 ...,以三个空格隔绝。

正如wjsl所说,计时器中
setTimeout(Student_A.wakeup,3000 )这里是把Student_A.wakeup那些函数作为参数字传送入了setTimeout函数。大家知道,函数的定义里面借使有this这些reserved word,那么它的意义取决于调用的主意。借使是用obj.function1 这种带点的格式来调用,那么this正是obj。 假设是间接调用,this则是window。那么在此地3分钟过后, wakeup将会被一贯调用,因为你并从未传到Student_A。

消除办法:加入三个sleep() 方法:
People.prototype = {      //...sleep: function(duration) { //5 秒后wakeupvar $this = this;setTimeout(function(){$this.wakeup();}, duration); },//...当中$this变量以当下目标赋值。由于js closure的风味,当setTimeout时间到,无名氏函数中的$this依好玩的事先赋予的百般目标。所以如若运营Student_A.sleep(5000),5分钟之后js engine 就能够运作Student_A.wakeup()。
(符号“$" 跟a-z,1-9 同样,都以变量名中能够运用的字符)。

此地删掉:
//Student子类构造函数,内部调用超类构造函数function Student(name) {
  People.call(this, name); //从People类承接,同偶然候传递参数name};
Java构造函数才是分开来写的,javascript 中由构造函数产生对象(合作new关键字),并未类。
代码供参照他事他说加以考察:
var Student = function(classroom, name, age) { this.classroom = classroom;People.call(this, name, age);};
“醒来”之后,属性改造:
能够先sleep(),然后随即改属性。然后wakeup()的时候就能够发觉属性发生了变化 :D

文中的 Student.prototype 在运维 Student.prototype = new People(); 语句时被统统改观。所以setClass() 已经不可能调用。能够在重写wakeup时同样定义。

 

复制代码 代码如下:

复制代码 代码如下:

Javascript中的承接大概有三类:1.目的冒充;2.原型承继;3.二者的拌和。

在Javascript中怎达成持续

javascript不是类,严酷的说,未有当真的继续  

承袭是我们在实现面向对象编制程序的时候很珍视的二个花招。即使大家讲不能够过度承接...

function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);}
}
function classB(name)
{
this.newMethod = classA;
this.newMethod(name);
}
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby 说明classB 继承了classA的方法.

function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);}
}
function classB(name)
{
this.newMethod = classA;
this.newMethod(name);
}
obj = new classA("hero");
objB = new classB("dby");
obj.showName(); // print hero
objB.showName(); // print dby 说明classB 继承了classA的方法.

一、对象冒充

对象冒充能够兑现多种承袭 比如

指标冒充能够实现多种承袭 举个例子

实质上对象冒充是跟this关键字紧凑联系在一起的(所以说充裕知情Javascript中的this关键字是何其的根本:P)。构造函数使用this来给属性和办法赋值,而构造函数也足以看作为多少个一般性的函数,所以我们就能够使大家的基类的构造函数成为子类的构造函数,然后在子类的中间调用那一个函数,那么子类就能够获得父类的天性和措施。

复制代码 代码如下:

复制代码 代码如下:

原理相当粗略,那大家怎么落实呢?下边就以代码示例,实际的操作一下。

function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
this.newMethod=classY;
this.newMethod():
delete this.newMethod;
}

function classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
this.newMethod=classY;
this.newMethod():
delete this.newMethod;
}

对象冒充完毕格局一,大家最常用的新建对象的不二秘籍:

但是一旦classX和classY有同一的品质也许措施,classY具备高优先级.
2.call()方法 call方法使与杰出的指标冒充法就类似的法子,它的首先个参数用作this的目的,其余参数都一贯传送给函数本人.

只是即使classX和classY有一致的本性大概措施,classY具备高优先级.
2.call()方法 call方法使与漂亮的指标冒充法就类似的艺术,它的首先个参数用作this的指标,其余参数都一贯传送给函数本身.

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 this.myConstructor = classA;
 this.myConstructor(name);
 delete this.myConstructor;
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);};
}
function classB(name)
{
classA.call(this,name);
}
objB = new classB("bing");
objB.showName();////说明classB继承classA的showName方法

function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.call(obj,"hello," );
function classA(name)
{
this.name=name;
this.showName=function(){alert(this.name);};
}
function classB(name)
{
classA.call(this,name);
}
objB = new classB("bing");
objB.showName();////说明classB继承classA的showName方法

为了印证以上的章程是不是准确,你能够亲身测量试验下,小编将测验用的代码写在底下:

3.apply()方法 aplly()方法有2个参数,贰个用作this对象,二个使传递给函数的参数数组.

3.apply()方法 aplly()方法有2个参数,多少个用作this对象,二个使传递给函数的参数数组.

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

var objA = new classA('DK');
objA.alertName();//DK
 
var objB = new classB('DS',20);
 
objB.alertName();//DS
objB.alertAge();//20

function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") );

function sayName(perfix)
{
alert(perfix+this.name);
}
obj= new Object();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") );

那就是所谓的对象冒充了,其余对象冒充还会有别的二种达成的点子,尽管它们的完结花招分裂等,但是它们的规律是同等的。

4. 原型链
prototype对象的其余性质和办法都会被传送给对应类的全部实例,原型链正是用这种形式来显示承继.

4. 原型链
prototype对象的别样性质和艺术都会被传送给对应类的兼具实例,原型链正是用这种艺术来显现承继.

对象冒充完成格局二,使用call方法:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){}
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero 说明b继承了a的方法

function classA (){}
classA.prototype.name="hero";
classA.prototype.showName=function(){alert(this.name)}
function classB(){}
classB.prototype=new classA();
objb = new classB()
objb.showName();//print hero 说明b继承了a的方法

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 classA.call(this,name);
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

此间须要留意调用classA的构造函数时,未有给它传递参数,那是原型链的标准做法,确认保证函数的构造函数没有另外参数.
并且子类的有所属性和措施,必需出现在prototype属性被赋值后,应该为在它前面赋的值会被删除.因为对象的prototype属性被替换来了新指标,增多了新点子的原始对象将被销毁.

此间需求小心调用classA的构造函数时,未有给它传递参数,那是原型链的专门的工作做法,确定保障函数的构造函数未有别的参数.
並且子类的有着属性和措施,必需出现在prototype属性被赋值后,应该为在它后面赋的值会被删除.因为对象的prototype属性被替换来了新目的,增添了新办法的原本对象将被销毁.

由此代码也能看出来,第一种办法中我们新建了函数指针指向父类,调用函数,然后将指针删除。而那边大家中间用call方法在this对象上面运维父类的构造函数,达成了平等的目标。别的与call方法相对于的则正是apply方法啦。

5 混和格局 固然用伪造艺术 定义构造函数属性,用原型法定义对象方法.

5 混和方式 不怕用伪造艺术 定义构造函数属性,用原型法定义对象方法.

对象冒充完毕方式三,使用apply方法:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

function classA(name)
{
this.name=name;
}
classA.prototype.showName=function(){alert(this.name)}
function classB(name)
{
classA.call(this,name);
}
classB.prototype = new classA();
classB.prototype.showName1=function(){alert(this.name+"*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();

function classA(name)
{
this.name=name;
}
classA.prototype.showName=function(){alert(this.name)}
function classB(name)
{
classA.call(this,name);
}
classB.prototype = new classA();
classB.prototype.showName1=function(){alert(this.name+"*****");};
obj = new classB("hero");
obj.showName();
obj.showName1();

var classA = function(name){
 this.name = name;
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 classA.apply(this,new Array(name));
 
 this.age = age;
 this.alertAge = function(){
  alert(this.age);
 }
}

在classB的构造函数中通过调用call方法 承接classA中的name属性,用原型链来承袭classA的showName方法.

在classB的构造函数中经过调用call方法 承继classA中的name属性,用原型链来承袭classA的showName方法.

骨子里大家能够看来,apply方法跟call方法是十三分邻近的,只不过传递参数是略有分歧罢了。

你或者感兴趣的稿子:

  • js承袭实现格局详解
  • javascript中的3种持续完结方式
  • JavaScript的9种持续达成格局归咎
  • js对象的组织和承接达成代码
  • Javascript 承接达成例子
  • Javascript 类的一而再达成代码
  • js的OOP承继达成(一定要看篇)

: 1 .对象冒充 原理: 构造函数使用this关键字给全数属性和格局赋值, 因为构造函数只是三个函数,所以能够使Clas...

二、原型承继

大家应该对prototype对象具备领悟,原型对象上的保有属性和议程将被传送给类的具备实例,全体当大家把父类的享有属性和格局付给子类的prototype对象时也就也正是贯彻了大家的接轨。

子类想取得父类的具备属性和艺术,那我们将父类的一个实例直接提交子类的prototype对象,那大家的子类不就一定于获取了父类的有所目的和措施?

代码示例伺候:

复制代码 代码如下:

var classA = function(){
 this.name = 'DK';
 this.alertName = function(){
  alert(this.name);
 }
}
 
var classB = function(name,age){
 this.name = name;
 this.age = age;
}
 
classB.prototype = new classA();
 
classB.prototype.alertAge = function(){
 alert(this.age);
}

在意这里的父类的构造函数必要确认保证未有参数。因为尽管有结构参数在贯彻原型继承的时候你也无从传递=.=!

三、混合承接

看名就能够猜到其意义,混合继承正是前二种方法的插花使用了。

复制代码 代码如下:

var classA = function(name){
 this.name = name;
}
 
classA.prototype.alertName = function(){
 alert(this.name);
}
 
var classB = function(name,age){
 classA.call(this,name);
 this.age = age;
}
 
classB.prototype = new classA();
 
classB.prototype.alertAge = function(){
 alert(this.age);
}

应用对象冒充完毕了向父类传递参数,同有的时候候选拔原型传承完毕了对国有方法的后续。

说完了那三中一连方式了,上边该谈起标题标时候了。

你或然会不解,为啥有了目的冒充,有了原型承接还要再弄出个什么混合承袭,对,最关键的也正是其一标题。

1.万一你实际测量试验一下,你会发觉经过对象冒充的措施贯彻的存在延续,子类是不能访问到父类的原型链上的不二等秘书诀的。

2.而用原型承袭,则会把持有的质量改为分享的性质,如若你同一个子类达成八个实例,你会发觉你的持有实例分享全体的质量。

3.不过那早晚是不对劲的了。所以就有了混合承继的情势,让属性持续保持个人,同不时候让子类能够访问父类的原型链的办法。

你能够亲自入手试一下,在目的冒充承袭的时候,子类不可能访谈父类的原型链方法,原型链承袭子类的具有实例分享全部父类属性。这里自身就不写例子了。

您或者感兴趣的稿子:

  • javascript 面向对象封装与承继
  • javascript 原型链维护和持续详解
  • javascript承接机制实例详解
  • 推荐JavaScript实现持续的一流艺术
  • 再谈javascript原型承袭
  • JavaScript完结持续的4种办法总计
  • 深刻驾驭javascript原型链和继续
  • JavaScript中的原型和持续详解(图像和文字)
  • Javascript中目的承袭的落到实处验小学例
  • javascript关于后续的用法汇总

本文由美高梅网址发布于新闻中心,转载请注明出处:Javascript中3种实现继承的方法和代码实例,继承实

上一篇:js表单提交和submit提交的区别实例分析,jquery实现 下一篇:没有了
猜你喜欢
热门排行
精彩图文