Javascript的对象封装和继承有哪些方法?优劣分别是什么?
1.对象封装方法
(1)原始模式生成对象
直接将我们的成员写入对象中,用函数返回。 缺点:很难看出是一个模式出来的实例。
function Stu(name, score) {
return {
name: name,
score: score
}
}
var stu1 = Stu("张三", 80);
var stu2 = Stu("李四", 90);
console.log(stu1.name); // 张三
(2)生成构造模式对象
Js帮我们提供了一个使用构造函数生成对象的模式,所谓“构造函数”,其实就是一个普通函数,但是内部使用了this变量。当使用new关键字对构造函数生成实例后,this变量则会绑定在实例对象上。
function Stu(name, score) {
this.name = name,
this.score = score
}
var stu1 = new Stu("张三", 80);
var stu2 = new Stu("李四", 90);
console.log(stu1.name + "/" + stu2.score); // 张三 90
console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true true
console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true true
不难看出js的构造函数生成对象和C#用class生成对象如出一辙,都是用模板定义对象成员通过new关键字实例化。
(3)Prototype模式
在js中,每一个构造函数都有一个prototype属性,这个对象的所有属性和方法,都会被构造函数的实例继承。那么我们直接给prototype添加成员就相当于在C#中声明静态成员了。
function Stu(name, score) {
this.name = name,
this.score = score
}
Stu.prototype.type='学生';
Stu.prototype.log = function (s) {
console.log(s);
}
var stu1 = new Stu("张三", 80);
var stu2 = new Stu("李四", 90);
console.log(stu1.type + "/" + stu2.type); // 学生 学生
stu1.log('hello'); // hello
console.log(stu1.log == stu2.log); // true
2.对象继承方法
(1)构造函数绑定,call(this)
在子函数中直接调用 call或apply方法,将父对象的构造函数绑定在子对象上。
function Stu(name, score) {
Grade.apply(this, arguments);
//Grade.call(this, arguments);
this.name = name,
this.score = score
}
function Grade() {
this.code = "初中";
this.ask = function () {
console.log("大家好");
}
}
var stu1 = new Stu("张三", 80);
var stu2 = new Stu("李四", 90);
console.log(stu1.code); // 初中
stu1.ask(); // 大家好
这里的apply做了两件事情,把第一个参数this给Grade构造函数(调用者),然后再执行Grade里的代码。就相当于将Grade中用this定义的成员在Stu中再执行一遍。
(2)通过prototype,原型继承
function Stu(name, score) {
this.name = name,
this.score = score
}
function Grade() {
this.code = "初中";
}
Stu.prototype = new Grade();
Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明
var stu1 = new Stu("张三", 80);
var stu2 = new Stu("李四", 90);
console.log(Stu.prototype.constructor); // 自己的构造函数
console.log(stu1.code); // 初中
前面说过prototype就相当于C#中的静态成员,所以我们就把父类的所有成员都变成自己的静态成员来实现继承。
通过prototype继承有一个缺点:所有继承的成员都是静态的,那么怎么继承对象成员呢?
(3)拷贝继承
把父对象的所有属性和方法,拷贝进子对象,实现继承。
function Stu(name, score) {
this.name = name,
this.score = score
}
function Grade() {}
Grade.prototype.code = "初中";
}
//函数封装
function extend(C, P) {
var p = P.prototype;
var c = C.prototype;
for (var i in p) {
c[i] = p[i];
}
}
extend(Stu, Grade);
var stu1 = new Stu("张三", 80);
var stu2 = new Stu("李四", 90);
stu1.code='高中';
console.log(stu1.code); // 高中
console.log(stu2.code); // 初中
console.log(Stu.prototype.constructor);
console.log(Grade.prototype.constructor)
原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent,通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
}
Javascript的对象封装和继承有哪些方法?优劣分别是什么?的更多相关文章
- javascript面对对象编程 之继承
上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承.在javascript中没有类的概念,全部不能像c#.java语言那样.直接的用类去继承类.比方如今有比方.如今 ...
- [转] javascript 判断对象是否存在的10种方法总结
[From] http://www.jb51.net/article/44726.htm Javascript语言的设计不够严谨,很多地方一不小心就会出错.举例来说,请考虑以下情况.现在,我们要判断一 ...
- JavaScript 之 对象属性的特性 和defineProperty方法
对象是无序属性的集合,而这些属性在创建是都带有一些特征值(可以理解为属性的属性,天生自带的),这些特征值是为了实现JavaScript引擎用的,因此JavaScript不能直接访问. JavaScri ...
- javascript宿主对象之window.location
location属性是一个用来存储当前页面URL信息的对象. 下面我们通过循环来列出location对象的完整属性列表: for(var i in location){ if(typeof locat ...
- 【温故而知新-Javascript】对象
1 创建对象 Javascript 支持对象的概率.有多种方法可以用来创建对象. <!DOCTYPE html> <html lang="en"> < ...
- 在JavaScript函数式编程里使用Map和Reduce方法
所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工 ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- 关于JavaScript中对象的继承实现的学习总结
一.原型链 JavaScript 中原型链是实现继承的主要方法.其主要的思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.实现原型链有一种基本模式,其代码如下. function Super ...
随机推荐
- Hello Kitty微信主题很可爱?小心财产安全!
个性化是产品服务的一个趋势.微信很火,可为什么微信主题只有一个呢?你让那些小女生情何以堪?这时HelloKitty微信主题.大嘴猴.哆啦A梦等一大批主题在网上出现了,有些打着免费的旗号却做着盗号的勾当 ...
- 手动安装ubuntu视频播放器插件的方法
新安装的ubuntu14.04在浏览器里面都不能看视频,提示缺少播放器插件,而且有一个安装的按钮,但是点击之后往往提示找不到,这就要手动安装了.第一步:首先运行一下更新命令吧sudo apt-get ...
- [codeforces 241]A. Old Peykan
[codeforces 241]A. Old Peykan 试题描述 There are n cities in the country where the Old Peykan lives. The ...
- ThreadLocal的设计与使用(原理篇)
在jdk1.2推出时开始支持java.lang.ThreadLocal.在J2SE5.0中的声明为: public class ThreadLocal<T> exte ...
- DICOM医学图形处理:storescp.exe与storescu.exe源码剖析,学习C-STORE请求(续)
转载:http://blog.csdn.net/zssureqh/article/details/39237649 背景: 上一篇博文中,在对storescp工具源文件storescp.cc和DcmS ...
- POJ 1062 昂贵的聘礼
C - 昂贵的聘礼 Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit St ...
- Linux 千万不要执行的10个命令
1. rm -rf 命令 rm -rf命令是删除文件夹及其内容最快的方式之一.仅仅一丁点的敲错或无知都可能导致不可恢复的系统崩坏.下列是一些rm 命令的选项. rm 命令在Linux下通常用来删除文件 ...
- django admin 扩展
添加自定义动作: 例子,添加一个方法,批量更新文章,代码如下: from django.contrib import admin from myapp.models import Article de ...
- tmux简单使用指南
一, ubuntu安装tmux sudo apt-get install tmux 二, tmux使用 1)打开shell,输入命令tmux,,shell下边会出现绿色状态条 2)然后同时按下ctrl ...
- 【云计算】Docker云平台—Docker进阶
Docker云平台系列共三讲,此为第二讲:Docker进阶 参考资料: 五个Docker监控工具的对比:http://www.open-open.com/lib/view/open1433897177 ...