一、实例化和继承的区别
构造函数、原型和实例的关系:每 个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型 对象的内部指针。
类(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. 编程之美 set 4 找到符合条件的数

    题目 任意给定一个正整数 N, 求一个最小的正整数 M (M > 1), 使得 N*M 的十进制表达式中只有 0 和 1. 解法 1. 枚举0,1能够组成的数字, 可以组成一颗二叉树 然后由 B ...

  2. Cocos Studio编辑器运行日志路径

    有时候打开Cocos Studio直接崩溃,要想查找原因就要查log了,网上找了好久才找到日志路径,在你工作空间下面的CocosStudio2\logs. 工作空间就是安装时候设置的那个路径.

  3. Ubuntu16.04最快捷搭建小型局域网Git服务器

    导读 使用linux操作系统,不得不提Git版本管理器,这个Linus花了两周时间开发的分布式版本管理器(这就是大神,先膜了个拜...),毫无疑问,Git版本管理器与linux系统有着与生俱来的同一血 ...

  4. input的disable和readonly

    在设计网页时,有时需要将输入框设置为只读状态,即其中的内容不可编辑,实现这种设计的方法有两种:使用input的disable和readonly两个属性. 先来看下二者的区别: <input ty ...

  5. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  6. MyBatis 学习 - 注解

    首先,POJO /** * @Title: Question.java * @Package com.test.model * @Description: TODO(POJO Question) * ...

  7. angular中的子路由用法

    Angular ui-route的用法 引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js.并且在html中将路由要插入的位置写上.而在js部分中和an ...

  8. web测试点--摘录

    转载地址:Web测试到底是在测什么 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...

  9. JSP中的内置对象和Struts中的Web资源的详解

    JSP中的内置对象有如下几种: request :继承于HttpServletRequest, HttpServletRequest继承ServletRequest, 获得的Request对象的方法: ...

  10. 百度jQuery库

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>