不会JS中的OOP,你也太菜了吧!(第一篇)
一、你必须知道的
1) 字面量
2) 原型
3) 原型链
4) 构造函数
5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)
二、开始创建对象吧
<1>: 首先来看两种最基本的创建对象的方法
1> 使用Object创建对象
var o = new Object();
o.sname = 'JChen___1';
o.showName = function(){
return this.sname;
}
2> 使用对象字面量创建对象
var o = {
name: 'JChen___2',
getName: function(){
return this.name;
}
}
但是这两个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。
<2> 接下来看看几种创建对象的模式吧
1>工厂模式
function create(name){
var o = new Object();
o.name = name;
o.sayName = function(){
return this.name;
};
return o;
}
var p1 = create('JChen___');
工厂模式也有一个缺点:就是没有解决对象识别的问题(即怎样知道一个对象的类型)。
2> 构造函数模式
function create2(name){
this.name = name;
this.sayName = function(){
return this.name;
};
//this.sayName = sayName;
}
//function sayName(){ return this.name};
var p1 = new create2('JChen___4');
构造函数模式也有一个缺点:就是每个方法都要在每个实例上创建一遍。
当然我们可以用上面的两行注释掉了代码来屏蔽上面那个缺点。
但是……,我们又产生了一个新问题——全局变量。如果有很多方法,我们岂不是要定义很多个全局变量函数。这是个可怕的问题。
3> 原型模式
1) 普通方法
function create3(){}
create3.prototype.name = 'JChen___5';
create3.prototype.sayName = function(){
return this.name;
};
var p1 = new create3();
2) 原型字面量方法——我姑且这么称吧
function create3(){}
create3.prototype = {
constructor: create3, //我们要设置它的constructor,如果它很重要
name: 'JChen___5',
sayName: function(){
return this.name;
}
};
var p1 = new create3();
原型的缺点:
1): 不能传参
2): 共享了变量
4> 构造+原型(模式)
function create4(name){
this.name = name;
}
create4.prototype.sayName = function(){
return this.name;
}
var p1 = new create4('JChen___6');
这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。
5> 动态原型模式
function create5(name){
this.name = name;
if(typeof this.sayName != 'function'){
create5.prototype.sayName = function(){
return this.name;
}
}
}
var p1 = new create5('JChen___7');
这种方法确实也是十分完美的一种方法。
6> 寄生构造函数模式
function create6(name){
var o = new Object();
o.name = name;
o.sayName = function(){
return this.name;
}
return o;
}
var p1 = new create6('JChen___8');
注意那个return o。构造函数在不返回值的情况下,会返回新对象实例。而通过在构造函数的末尾加入return 语句,可以重写调用构造函数时返回的值。
这个种用法可以用在,假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array的构造函数,因此可以使用这个模式。
function specialArray(){
var values = new Array(); values.push.apply(values, arguments); values.join2 = function(){
return this.join('|');
}; return values;
}
var colors = new specialArray('red', 'blue', 'green');
colors.join2();//returned: red|blue|green
7>稳妥构造函数模式
稳妥构造函数遵循与寄生构造函数类似的模式,但是有两点不同:
一是新创建对象的实现方法不引用this
二是不使用new操作符调用构造函数。
function create7(name){
var o = new Object();
var age = 12; //私有变量
o.sayName = function(){ //私有方法
return name + ' ' + age;
}
return o;
}
var p1 = create7('JChen___9');
三、总结
对象(类)的创建方法大概就这9种了吧。
创建是没问题了,但是这是第一步,如何实现继承呢?且看下回分解。
不会JS中的OOP,你也太菜了吧!(第一篇)的更多相关文章
- 不会JS中的OOP,你也太菜了吧!(第二篇)
一.你必须知道的 1> 原型及原型链在继承中起到了关键的作用.所以你一定要理解他们.2> 不会JS中的OOP,你也太菜了吧!(第一篇) 二.继承的6种方法 1> 原型链继承 原型链继 ...
- Java中常用的七个阻塞队列介绍第一篇
Java中常用的七个阻塞队列介绍第一篇 在上一篇我们对Java中的队列分类做了简单的介绍.本文咱们主要来聊聊阻塞队列中的七个常用子类.这七个阻塞队列的学习步骤:先看源码,分析完源码之后,我们再来对每个 ...
- 小结JS中的OOP(下)
关于JS中OOP的具体实现,许多大神级的JS专家都给出了自己的方案. 一:Douglas Crockford 1.1 Douglas Crockford实现的类继承 /** * 原文地址:http:/ ...
- 小结JS中的OOP(中)
此篇文章主要是提炼<JavaScript高级程序设计>中第六章的一些内容. 一:JS中OOP相关的概念 开始之前先总结JS中OOP相关的一些概念: 构造函数:JS中的构造函数就是普通的函数 ...
- 小结JS中的OOP(上)
前言:大家都知道,OOP有三大特性:封装,继承,多态.下面是自己对这三个特性的理解: 封装:把属性与方法整合到某种数据类型中.目的是让类的使用者按类的编写者的意愿去使用类.在封装过程中会一般会做两件事 ...
- 在net中json序列化与反序列化 面向对象六大原则 (第一篇) 一步一步带你了解linq to Object 10分钟浅谈泛型协变与逆变
在net中json序列化与反序列化 准备好饮料,我们一起来玩玩JSON,什么是Json:一种数据表示形式,JSON:JavaScript Object Notation对象表示法 Json语法规则 ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- 进阶学习js中的执行上下文
在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...
- 理解js中的闭包
闭包 我的理解是 能够有权访问另一个函数作用域中变量的函数 通常我们知道 普通的函数在调用完成之后,活动对象不会从内存中销毁,其执行环境的作用域链会被销毁,造成资源的浪费 而闭包的好处就在于执行完就会 ...
随机推荐
- HTML5 CSS3简要教程
Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和& ...
- Ubuntu 14.04 – How to install xrdp in Ubuntu 14.04
http://c-nergy.be/blog/?p=5305 Hello World, Ubuntu 14.04 has been released on April 17th 2014 and we ...
- 如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
- Sublime Text 2 常用快捷键
Sublime Text 2 常用的快捷键 (不包含插件快捷键) Ctrl+P 打开文件搜索框,可以直接输入文件名搜索,或者输入@funcName 可以直接到函数定义处,输入#key 可以直接查找,输 ...
- iOS中UIKit——UIDataDetectors(数据检测器)它将电话、邮件、网址等变为链接
1.它用于UITextView和UIWebView,属性名为:dataDetetorTypes 2.此属性可以设定使符合电话.邮件.网址.符合格式的日期等文字变为链接文字. 3.电话号码点击后拨出电话 ...
- php final static const成员属性用法
http://www.111cn.net/phper/php/38976.htm 首先来说说final 1.final不能用来修饰成员属性 2.final只能修饰类和方法 作用:被修饰的类不能被子类所 ...
- C#代码利用MongoDB中Group聚合函数查询
例子: public static void getUserRFM(DateTime beginTime, DateTime endTime) { MongoDat ...
- 17) JMS: java Message Service(Java消息服务)
JMS是一个标准,就像EJB,有很多开源的,商业的实现,ms技术对应的规范是jsr914,规范的实现称为jms provider,常见的实现有ActiveMQ.JBoss MQ.IBM We ...
- 10)Java Error and Exception
1>异常继承类 Error类和Exception类都继续自Throwable类 Error表示系统级的错误情况,如内存错误这样程序无法通过自身的处理再继续执行下去的情 ...
- Delphi 7 里没有加载的控件
在原来版本如D5.D6中使用的控件如Quickrep,FastNet等,在D7中仍然是保留的.只是Delphi没有将他们默认的安装到组件面版中来.这些控件包全部保存在Delphi目录的bin下,文件扩 ...