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

  

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

借用构造函数继承

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

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

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

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors = ["red", "blue", "green"];
  4. }
  5. SuperType.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. function SubType(name, age){
  9. //继承属性
    SuperType.call(this, name);
  10. this.age = age;
  11. }
  12. //继承方法
  13. SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
  14. alert(this.age);
  15. };
  16. var instance1 = new SubType("Nicholas", 29);
  17. instance1.colors.push("black");
  18. alert(instance1.colors);
  19. instance1.sayName();
  20. instance1.sayAge();
  21. //"red,blue,green,black"
  22. //"Nicholas";
  23. //
  24. var instance2 = new SubType("Greg", 27);
  25. alert(instance2.colors);
  26. instance2.sayName();
  27. instance2.sayAge();
  28. //"red,blue,green"
  29. //"Greg";
  30. //
 
SuperType 构造函数定义了两个属性:name 和 colors。SuperType 的原型定义 了一个方法 sayName()。SubType 构造函数在调用 SuperType 构造函数时传入了 name 参数,紧接着 又定义了它自己的属性 age。然后,将 SuperType 的实例赋值给 SubType 的原型,然后又在该新原型 上定义了方法 sayAge()。这样一来,就可以让两个不同的 SubType 实例既分别拥有自己属性——包 括 colors 属性,又可以使用相同的方法了。
 

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

即将上面的第二次调用构造函数继承方法的new改为如下
  1. function inheritPrototype(subType, superType){
  2. var prototype = object(superType.prototype);//创建对象
  3. prototype.constructor = subType; //增强对象
  4. subType.prototype = prototype;//指定对象
  5. }
也可改为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. Hibernate_day03--课程安排_表之间关系_一对多操作

    Hibernate_day03 上节内容 今天内容 表与表之间关系回顾(重点) Hibernate的一对多操作(重点) 一对多映射配置(重点) 一对多级联操作 一对多级联保存 一对多级联删除 一对多修 ...

  2. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  3. css+jq写的小小的移动端按钮的动画改变(三个很闲变成一个叉号)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Android Studio添加assets文件夹

    Step #1:调出项目结构管理区域 View->Tool Windows->Project Step #2:结构管理区域选择“Project” Step #3:新建"asset ...

  5. System.getProperty()方法大全 (转载)

    System.out.println("java版本号:" + System.getProperty("java.version")); // java版本号S ...

  6. [算法][LeetCode]Single Number——异或运算的巧妙运用

    题目要求 Given an array of integers, every element appears twice except for one. Find that single one. N ...

  7. MongoDB插入多条数据

    刚开始学mongodb,只知道几个命令,insert插入也只能一条一条插入,而在实际情况下数据一般都非常多,刚开始想直接上传json文件,网上搜了n多方法发现这种方法不好弄,然后就想着要么一下子把多条 ...

  8. jenkins multijob 插件使用

    如果你想要停止对下游/上游工作链定义的混乱 当您想要添加具有层次结构的任务时,按顺序执行或并行执行 安装multijob插件可以让jenkins任务按照分组.顺序执行 jenkins版本:2.80 1 ...

  9. spring-boot Web集群

    SpringBoot启动类增加注解 @EnableRedisHttpSession @SpringBootApplication @ImportResource({"classpath:co ...

  10. 进击的RecyclerView入门一(简单上手)

    虽然RecyclerView面世有一段时间了,但由于它的学习成本相对较高,很多码友只是粗略的认识了一下而没有细致的品味RecyclerView的真谛. 那么从现在开始我将带你装逼带你飞,一起领略Goo ...