一、实例化和继承的区别
构造函数、原型和实例的关系:每 个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型 对象的内部指针。
类(Class)和实例(Instance),类是抽象的模板,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可能不同。
eg: function a(){};
var instance = new a();
//new原理:
var obj={};
obj._proto_ = a.prototype;
a.call(this);
return obj

  

 
eg2:function Point(x, y) { this.x = x; this.y = y; }
Point.prototype = {
  print: function () { console.log(this.x, this.y); }
};
var p = new Point(10, 20);
p.print(); // 10 20
实例即将构造函数执行并赋予特定的值。通过new fn()新建的对象即为fn的实例。
实例化即为新建一个对象并指向构造函数原型,并且在这个对象作用域内执行构造函数。
 
 
继承即复用父对象的方法和属性并且自己可以重写方法和新建属性和方法。
所以实例就是继承了构造函数方法和属性的对象。但是它不能重写和新建新的方法和属性,只能用构造函数及构造函数原型上有的。
但是继承要求必须做到以上两点。
所以继承需要在实例化的基础上做其他必要的处理。
如果单纯的使用实例来处理继承:(原型式继承)
Object.create(obj,{})第二个参数和Object.defineproperty(obj,{})的第二个参数类似。
Object.create(obj,{})的原理:
function F(){};
F.prototype = obj;
return new F();
即返回一个F的实例,F的原型指向obj,即F的实例的原型指向F的原型即指向obj
从本质上讲,Object.create()对传入其中的对象执行了一次浅复制
eg:
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
对于引用类属性,两个实例同时指向此地址,此属性成为两个实例的公用属性。
在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式 继承是完全可以胜任的。不过别忘了,包含引用类型值的属性始终都会共享相应的值,就像使用原型模 式一样。
-----------------------------------------------

借用构造函数继承

,在子类中直接执行父类构造函数。可以在子类型构造函数中向超类型构造函 数传递参数

function SuperType(name){
this.name = name;
}
function SubType(){
//继承了 SuperType,同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //
 
构造函数模式存在的问题——方法都在构造函数中定 义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结 果所有类型都只能使用构造函数模式。

组合继承(最常用的继承模式)

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);
instance1.sayName();
instance1.sayAge();
//"red,blue,green,black"
//"Nicholas";
//
var instance2 = new SubType("Greg", 27);
alert(instance2.colors);
instance2.sayName();
instance2.sayAge();
//"red,blue,green"
//"Greg";
//
 
SuperType 构造函数定义了两个属性:name 和 colors。SuperType 的原型定义 了一个方法 sayName()。SubType 构造函数在调用 SuperType 构造函数时传入了 name 参数,紧接着 又定义了它自己的属性 age。然后,将 SuperType 的实例赋值给 SubType 的原型,然后又在该新原型 上定义了方法 sayAge()。这样一来,就可以让两个不同的 SubType 实例既分别拥有自己属性——包 括 colors 属性,又可以使用相同的方法了。
 

寄生组合式继承是引用类型最理想的继承范式

即将上面的第二次调用构造函数继承方法的new改为如下
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype;//指定对象
}
也可改为subType.prototype = Object.create(superType.prototype);不过这样和直接new并无区别,而且速度还慢。
在上面函数中第二句增强函数也可以去掉,因为并不影响,原型链。constuctor即由原型指向构造函数。

javascript对象继承的更多相关文章

  1. JavaScript 对象继承 OOP (三)

      对象继承 A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. JavaScript 语言的继承不通过 class (es6 中的class 不过是 ...

  2. javascript对象继承的实现

    现在有两个对象,需要实现Chinese类型对象对Person类型对象的继承. 这里分两部分,属性和方法. 属性可以直接用构造函数的方法实现继承,而方法则要通过原型链来实现继承. 先解释什么是原型链,每 ...

  3. 详解JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...

  4. JavaScript对象 继承

    JavaScript继承主要依靠原型链实现. 原型链 利用原型让一个引用类型继承另一个引用类型水位属性和方法. 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指 ...

  5. JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...

  6. javascript对象继承详解

    问题 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. f ...

  7. Javascript 对象继承 原型链继承 对象冒充 call 混合方式

    一.原型链继承 function ClassA() {} ClassA.prototype.color = "blue"; ClassA.prototype.sayColor = ...

  8. JavaScript创建对象及对象继承

    面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同.实际上,JavaSc ...

  9. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

随机推荐

  1. 解决error: Unable to find vcvarsall.bat【python 2.7/vs2010】

    转自:http://blog.csdn.net/secretx/article/details/17472107 去下载安装VS2010(08版貌似也行,不过没必要用旧版,指不定哪个库又无法编译),给 ...

  2. 关于recycler遇到的问题

    1.//设置recyclerView不能点击myLayoutManager.setScrollEnabled(false);class MyLayoutManager extends LinearLa ...

  3. Surface UEFI 菜单显示

    下载 Surface 的恢复映像   https://support.microsoft.com/zh-cn/surfacerecoveryimage UEFI 设置只能在系统启动时进行调整.若要加载 ...

  4. 【BZOJ3881】[Coci2015]Divljak fail树+树链的并

    [BZOJ3881][Coci2015]Divljak Description Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操 ...

  5. Android软键盘的隐藏显示研究

    http://winuxxan.blog.51cto.com/2779763/522810 全局推: android:windowSoftInputMode="adjustResize&qu ...

  6. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  7. 关于Springboot 中注入多个cacheManage 时候 存在报错

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'e ...

  8. mysql 标点符号

    w攻防一体化.

  9. 剑指Offer——不用加减乘除做加法

    题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 分析: "^"是不带进位的加法. "&"可以得到所有进位位组 ...

  10. ansible(1)

    一.初识ansible 1.准备工作: 准备四台干净的虚拟机,如下: 192.168.133.129(主控节点,下面三个为被控节点) 192.168.133.130 192.168.133.131 1 ...