Javascript 面向对象实践
踩到了坑,才能学到东西。
记录我在慢慢的转向模块化遇到的问题以及解决的思路。
1.采用立即执行函数,闭包的方式创建模块
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module</title>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript">
var store = storeModule.getStore({x:1});
</script>
</head>
<body>
</body>
</html>
js:
var storeModule = (function(){
var Store = function(opinion){
this.opinion = opinion;
}
Store.prototype = {
constructor:Store,
init:function(opinion){
console.log('a:',opinion);
this.opinion = opinion;
console.log('b:',this.opinion);
}
}
return {
getStore:function(opinion){
var storeInstance = Object.create( Store.prototype );
Store.prototype.init.apply(storeInstance,arguments);
// var storeInstance2 = new Store(opinion);
// storeInstance2.init(opinion);
console.log('store end');
return storeInstance;
}
}
})();
坑:
采用 Object.create( Store.prototype )
这种方式创建对象,无法将参数opinion
传递给Store这个function对象,百思不得其解,后来,参阅了一下Jquery的插件的源码,发现需要在 init:function(opinion)
中增加一行this.opinion = opinion
,否则传递不过去。
Javascript 面向对象实践的更多相关文章
- 深入解读JavaScript面向对象编程实践
面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术.对JavaScript而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力 ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
随机推荐
- HDU 4759 Poker Shuffle(2013长春网络赛1001题)
Poker Shuffle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- PHP项目收藏
API接口管理系统 Github上的PHP资源汇总大全 Github.com上有哪些比较有趣的PHP项目 SOAP NuSOAP - SOAP Toolkit for PHP [官网] [教程] 通用 ...
- 【防火墙技术连载11】强叔侃墙 攻击防范篇 流量型攻击之UDP Flood及防御
http://support.huawei.com/huaweiconnect/enterprise/thread-214141.html
- Java深入 - 深入 Java自己定义注解
我们在使用Spring框架的时候,会常常使用类似:@Autowired 这种注解. 我们也能够自定义一些注解.Java的注解主要在包:java.lang.annotation中实现. 1. 元注解 什 ...
- C#远程调用技术WebService修炼手册
一.课程介绍 一位伟大的讲师曾经说过一句话:事物存在即合理!意思就是说:任何存在的事物都有其存在的原因,存在的一切事物都可以找到其存在的理由,我们应当把焦点放在因果关联的本质上.所以在本次分享课开课之 ...
- java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0
严重性 代码 说明 项目 文件 行 禁止显示状态错误 xamarin java.lang.UnsupportedClassVersionError: com/android/dx/command/Ma ...
- 在ASP.NET MVC中实现Select多选
我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...
- 连接查询简析 join 、 left join 、 right join
join :取两个表的合集: left join:左表的数据全部保留,然后增加右表与左表条件匹配的记录.如下 select cc.* from cloud_groups as cg left join ...
- 提高你的代码稳定性与可读性-lint工具
from://http://wiki.eoe.cn/page/Improving_Your_Code_with_lint.html 负责人:lingzideshensha 分任务原文链接:http:/ ...
- 3种LVS/Nginx/HAProxy负载均衡器的对比分析
现在网站发展的趋势对网络负载均衡的使用是随着网站规模的提升根据不同的阶段来使用不同的技术: 一种是通过硬件来进 行进行,常见的硬件有比较昂贵的NetScaler.F5.Radware和Array等商用 ...