Javascript类继承-机制-代码Demo【原创】
2015-06-25 14:18
741 查看
最近看到《Javascript设计模式》,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype、new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂时不对原型链、继承机制做过多描述,直接上代码,让大家先有一个整体的了解!
依照教程中对”类继承“逐步的优化,递进方式讲述了以下几种类继承方法,将教材中的几个demo例子记录一下,分享给大家,共同学习:
先给一个类定义与实例化的方法:
下面开始说继承,Author类继承Person类
方法1:
最基础的继承表达式
方法2:
使用extend方法,将继承的方法封装进去
方法3:
解决方法2中问题(超类Person名字被固化在Author类声明中)
最后,针对方法3,看一下两个class的结构,一目了然:
转载,请注明地址:
/article/5115275.html
博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等(手工制作)
网店:
http://shop117066935.taobao.com/
---------------------------------------------------------------------
依照教程中对”类继承“逐步的优化,递进方式讲述了以下几种类继承方法,将教材中的几个demo例子记录一下,分享给大家,共同学习:
先给一个类定义与实例化的方法:
/* Class Person. */ //类定义 function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } //实例化 var reader = new Person('John Smith'); reader.getName();
下面开始说继承,Author类继承Person类
方法1:
最基础的继承表达式
/* Class Author. */ function Author(name, books) { Person.call(this, name); // Call the superclass' constructor in the scope of this. this.books = books; // Add an attribute to Author. } Author.prototype = new Person(); // Set up the prototype chain. Author.prototype.constructor = Author; // Set the constructor attribute to Author. Author.prototype.getBooks = function() { // Add a method to Author. return this.books; }; //Author类实例化 var author = []; author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']); author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']); author[1].getName(); author[1].getBooks();
方法2:
使用extend方法,将继承的方法封装进去
/* Extend function. */ function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; } /* Class Person. */ function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } /* Class Author. */ function Author(name, books) { Person.call(this, name); //该方法的问题:超类Person名字被固化在Author类的声明之中 this.books = books; } extend(Author, Person); Author.prototype.getBooks = function() { return this.books; };
方法3:
解决方法2中问题(超类Person名字被固化在Author类声明中)
/* Extend function, improved. */ function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; //确保超类的constructor属性(superClass.prototype.constructor)已被正确设置 subClass.superclass = superClass.prototype; if(superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; } } /* Class Person. */ function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } /* Class Author. */ function Author(name, books) { Author.superclass.constructor.call(this, name); this.books = books; } extend(Author, Person); Author.prototype.getBooks = function() { return this.books; }; //有了superclass属性,就可以直接调用超类中的方法 Author.prototype.getName = function() { var name = Author.superclass.getName.call(this); return name + ', Author of ' + this.getBooks().join(', '); };
最后,针对方法3,看一下两个class的结构,一目了然:
转载,请注明地址:
/article/5115275.html
------------------------------------------------
博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等(手工制作)
网店:
http://shop117066935.taobao.com/
---------------------------------------------------------------------
相关文章推荐
- 直接读取服务器的一个json 文件
- 从零开始构建实现一个JavaScript模块化加载器
- 简单的jsTree运用
- 动态调试JS代码
- js 监听整个页面的回车事件
- js正则对象RegExp的$1...$9 属性
- javascript eval和JSON之间的联系
- AJAX 跨域请求 - JSONP获取JSON数据
- JavaScript读取XML
- js 打印网页指定内容
- javascript实现跨域的方法汇总
- JS日期时间选择器
- 浅谈JavaScript字符串拼接
- javascript最基本的函数汇总
- js获取url 参数
- 使用javascript将时间转换成今天,昨天,前天等格式
- javascript中的Function.prototye.bind
- JavaScript观察者模式
- js闭包理解
- JavaScript进阶 函数、定义函数、函数应用、对象