javascript学习笔记(十) js对象 传承

2019-08-04 08:57栏目:WRB前端

1.原型链
//相当少单独采取

1.原型链
//相当少单独使用
  View Code
 
 1 //定义 SuperClass类,有叁个天性property和叁个办法getSuperValue
 2 function SuperClass() {
 3     this.property = true;
 4 }
 5 SuperClass.prototype.getSuperValue = function() {
 6     return this.property;
 7 }
 8
 9 //定义SubClass类,有叁个属性subproperty和新生加上的贰个办法getSubValue
10 function SubClass() {
11     this.subproperty = false;
12 }
13
14 //SubClass类继承SuperClass类
15 SubClass.prototype = new SuperClass();
16
17 //SubClass类加多贰个方式getSubValue
18 SubClass.prototype.getSubValue = function() {
澳门威尼斯人app,19     return this.subproperty;
20 }
21
22 //创造SubClass类的实例
23 var instance = new SubClass();
24 alert(instance.getSuperValue());  

复制代码 代码如下:

  1. 明确原型与实例的关系
    首先种方法用 instanceof 操作符,用来测量试验实例和原型链中出现过的构造函数
    1 alert(instance instanceof Object);                //true ,instance是Object的实例吗?
    2 alert(instance instanceof SuperClass);        //true ,instance是SuperClass的实例吗?
    3 alert(instance instanceof SubClass);        //true,instance是SubClass的实例吗?
    其次种艺术用 isPrototypeOf()方法,测量检验原型链中出现的原型
    1 alert(Object.prototype.isPrototypeOf(instance));    //true
    2 alert(SuperClass.prototype.isPrototypeOf(instance));    //true
    3 alert(SubClass.prototype.isPrototypeOf(instance));    //true
  2. 用原型链承接定义方法时的小心点
    定义方法是的逐个:
      View Code
     
     1 function SuperClass() {
     2     this.property = true;
     3 }
     4 SuperClass.prototype.getSuperValue = function() {
     5     return this.property;
     6 }
     7
     8 function SubClass() {
     9     this.subproperty = false;
    10 }
    11
    12 //SubClass继承SuperClass
    13 SubClass.prototype = new SuperClass();                    //那些要先写,新扩大长的点子和重写超类的点子要写在后头,不然重写的超类方法将永恒不能调用
    14
    15 //加多新办法
    16 SubClass.prototype.getSubValue = function() {
    17     return this.subproperty;
    18 }
    19 //重写超类的不二等秘书籍 www.2cto.com 
    20 SubClass.prototype.getSuperValue = function() {
    21     return false;
    22 }
    23
    24 var instance = new SubClass();
    25 alert(instance.getSuperValue());        //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而遮蔽了SuperClass的getSuperValue()方法,
    26                                                     //使用SuperClass的方法会调用SuperClass的getSuperValue()方法
     
    原型链继承的瑕玷:1)分享超类中的属性,2)在成立子类时不能够向超类的构造函数传递参数。全数相当少单独选取原型链
    4.借出构造函数
    //比相当少单独使用

View Code
//定义 SuperClass类,有三性情能property和三个措施getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}

优点:能够向超类传递参数 。劣势:函数不可能复用,全数类都要利用构造函数方式
  View Code
 
 1 function SuperClass(name) {
 2     this.name = name;
 3 }
 4 function SubClass(){
 5     SuperClass.call(this,"RuiLiang");        //承袭了SuperClass,同不经常间向SuperClass传递了参数
 6     this.age = 29;                                //实例属性
 7 }
 8
 9 var instance = new SubClass();
10 alert(instance.name);        //RuiLiang
11 alert(instance.age);            //29
 
6.组合承袭
//最常用的接轨情势
  View Code
 
 1 //创建SuperClass
 2 function SuperClass(name) {
 3     this.name = name;
 4     this.colors = ["red","blue","green"];
 5 }
 6 SuperClass.prototype.sayName = function() {
 7     alert(this.name);
 8 }
 9
10 ////创建SubClass
11 function SubClass(name,age) {
12     SuperClass.call(this,name);        //承接属性
13     this.age = age;                            //自个儿的性质
14 }
15
16 SubClass.prototype = new SuperClass();            //承继方法
17 SubClass.prototype.sayAge = function() {            //SubClass增添新办法
18     alert(this.age);
19 };
20
21 //使用
22 var instance1 = new SubClass("RuiLiang",30);
23 instance1.colors.push("black");
24 alert(instance1.colors);                    //"red,blue,green,black"
25 instance1.sayName();                        //"RuiLiang"
26 instance1.sayAge();                        //30
27
28 var instance2 = new SubClass("XuZuNan",26);
29 alert(instance2.colors);                    //"red,blue,green"
30 instance2.sayName();                        //"RuiLiang"
31 instance2.sayAge();                        //30
 
7.其余承接情势
原型式承继、寄生式承袭、寄生组合式继承

//定义SubClass类,有三个属性subproperty和新生加多的贰个措施getSubValue
function SubClass() {
this.subproperty = false;
}

 

//SubClass类继承SuperClass类
SubClass.prototype = new SuperClass();

 

//SubClass类加多二个方式getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}

摘自 晴天漫步

//成立SubClass类的实例
var instance = new SubClass();
alert(instance.getSuperValue());

//相当少单独使用 View Code 1 //定义 SuperClass类,有一个性格property和一个办法getSuperValue 2 function SuperClass() { 3 this.property = true; 4 } 5 Su...

  1. 规定原型与实例的关联
    先是种方式用 instanceof 操作符,用来测量试验实例和原型链中出现过的构造函数

复制代码 代码如下:

alert(instance instanceof Object); //true ,instance是Object的实例吗?
alert(instance instanceof SuperClass); //true ,instance是SuperClass的实例吗?
alert(instance instanceof SubClass); //true,instance是SubClass的实例吗?

其次种办法用 isPrototypeOf()方法,测量检验原型链中现身的原型

复制代码 代码如下:

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true

  1. 用原型链承袭定义方法时的注目点
    定义方法是的一一:

复制代码 代码如下:

View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}

function SubClass() {
this.subproperty = false;
}

//SubClass继承SuperClass
SubClass.prototype = new SuperClass(); //那一个要先写,新加上的主意和重写超类的主意要写在背后,不然重写的超类方法将永久不能够调用

//增添新点子
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重写超类的情势
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而遮掩了SuperClass的getSuperValue()方法,
//使用SuperClass的方法会调用SuperClass的getSuperValue()方法

原型链承袭的隐疾:1)分享超类中的属性,2)在创建子类时不能够向超类的构造函数传递参数。全数非常少单独行使原型链

4.借出构造函数
//非常少单独选取

可取:能够向超类传递参数 。劣势:函数不也许复用,全体类都要选取构造函数情势

复制代码 代码如下:

View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); //承袭了SuperClass,同时向SuperClass传递了参数
this.age = 29; //实例属性
}

var instance = new SubClass();
alert(instance.name); //RuiLiang
alert(instance.age); //29

6.重组承袭
//最常用的再而三情势

复制代码 代码如下:

View Code
//创建SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}

////创建SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //承接属性
this.age = age; //自身的脾气
}

SubClass.prototype = new SuperClass(); //承继方法
SubClass.prototype.sayAge = function() { //SubClass增添新章程
alert(this.age);
};

//使用
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30

var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30

7.别样承接格局
原型式承接、寄生式承袭、寄生组合式承袭

您可能感兴趣的稿子:

  • js对象的复制承袭实例
  • js对象的结构和继续达成代码
  • js面向对象之静态方法和静态属性实例分析
  • 始建js对象和js类的主意汇总
  • JS和JQ的event对象分别解析
  • js中的json对象详细介绍
  • JS对象与json字符串格式调换实例
  • js对象承接之原型链传承实例

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:javascript学习笔记(十) js对象 传承