今天即兴研究了下JS,查阅了相关资料 ,发现Js中没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。下面大概介绍一下Js中五种继承模式!

1、构造函数绑定:使用apply或是call

 function Animal() {
this.species = "动物";
} function Cat(name, color) {
//Animal.apply(this, arguments);
//Animal.call(this);
this.color = color;
this.name = name;
} var cat1 = new Cat("cat1", "white");
alert(cat1.species);

 2、prototype模式

      Cat.prototype = new Animal();
//任何一个prototype对象都有一个constructor属性,指向它的构造函数.
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛", "黄色");
alert(cat1.species); // 动物 //直接继承prototype 优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对
     Cat.prototype的修改,都会反映到Animal.prototype。
function Animal() { }
Animal.prototype.species = "动物";
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

3、利用空对象作为中介  F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

   var F = function () { };
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat; //对上面封装
function extend(Child, Parent) {
var F = function () { };
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype; //可以直接调用父对象的方法
} extend(Cat, Animal);
var cat1 = new Cat("大毛", "黄色");
alert(cat1.species); // 动物

4、拷贝继承

  function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}

5、 原型式继承

 //clone()函数用来创建新的类Person对象
var clone = function (obj) {
var _f = function () {
};
//这句是原型式继承最核心的地方,函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
};
//先声明一个对象字面量 var Person = {
name: 'Darren',
getName: function () {
return this.name;
}
};
//不需要定义一个Person的子类,只要执行一次克隆即可
var Programmer = clone(Person);
//可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
alert(Programmer.getName());
Programmer.name = 'Darren2';
alert(Programmer.getName());
//声明子类,执行一次克隆即可
var Someone = clone(Programmer);

初步接触Javascript感觉挺简单,可是当我慢慢的深入其中,发现Javascript其实也是一门很复杂的语言!只有慢慢的深入了!

JavaScript中实现继承的更多相关文章

  1. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  2. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  3. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  4. 彻底搞懂JavaScript中的继承

    你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...

  5. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  6. 关于JavaScript中实现继承,及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  7. javascript中各种继承方式的优缺点

    javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...

  8. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  9. 深入理解JavaScript中的继承

    1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...

  10. javascript 中的继承实现, call,apply,prototype,构造函数

    javascript中继承可以通过call.apply.protoperty实现 1.call call的含义: foo.call(thisObject, args...) 表示函数foo调用的时候, ...

随机推荐

  1. Java IO 学习(零)概述

    参考文献 Doug Lea的  <Scalable IO in Java> Java NIO trick and trap IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇) 网络编程释疑 ...

  2. (10)centos搭建web服务器 (Nginx+ django)

    安装 python3 sudo yum install python34 安装uWSGI pip install uwsgi 安装 Nginx http://nginx.org/en/download ...

  3. Product of Array Except Self - LeetCode

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  4. 【转】【Stackoverflow好问题】去掉烦人的“!=null"(判空语句)

    [Stackoverflow好问题]去掉烦人的“!=null"(判空语句) 问题 为了避免空指针调用,我们经常会看到这样的语句   ...if (someobject != null) { ...

  5. word 插入空白偶数页(论文、报告等写作常用)

    目前在写大论文的过程中,需要在偶数页中插入一个空白页,但是又不想在下面加上页码,所以采用通常的方式并不妥,所以就用到了这篇博文中内容,采用奇偶页的方式插入空白偶数页,而且偶数页也不会在上面出现任何的字 ...

  6. UIScrollView/UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)

    在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...

  7. Android图片突出

    概述 今天有个群友问 Android 图片凸出 效果怎么弄,早以前有过类似的需求,整个项目的提示框都是一个背景,背景上方有凸出半张图片,所以用layer-list写了一个背景来实现. 思路 随便画了一 ...

  8. tomcat使用安全及CVE-2017-12615

    tomcat安全情报的收集 1.首先定期查看官网各个版本存在的安全漏洞公告: http://tomcat.apache.org/security.html 2.去各大漏洞网站查看漏洞披露信息 看几个漏 ...

  9. Elite Container DELPHI下的一个轻量级IoC对象容器

    一.简介: Elite Container是DELPHI下的一个轻量级IoC对象容器(IoC:Inverse of Control,反转控制).它是参考了Java中的Spring框架(主要是配置文件的 ...

  10. Cocos2d-x 3.0 屏幕触摸及消息分发机制

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...