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插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
随机推荐
- Plan Explorer数据库
Plan Explorer数据库 https://www.sentryone.com/platform/sql-server-performance-monitoring
- 液晶电视插有线电视信号线的是哪个接口 HDMI是什么接口
1.液晶电视插有线电视信号线的接口(模拟信号)是射频接口(也叫RF接口,同轴电缆接口,闭路线接口),数字信号就得通过机顶盒转换成模拟信号视频输出至电视,才能正常收看电视节目. 2.电视机或高清机顶盒上 ...
- Xamarin.Forms.Xaml.XamlParseException: MarkupExtension not found for trans:Translate using a PCL in Release Mode
I'm pretty desperate finding the solution for the problem stated below. I have a cross platform solu ...
- Xcode 5.0.1安装插件:规范注释生成器VVDocumenter + OSX 10.9.2
终于有时间停下来玩下Xcode的插件了,最近需要用下规范注释生成器,于是装了个插件用下. 下面是安装过程(简单的不得了): 1.前往GitHub下载工程文件:VVDocumenter-Xcode 2. ...
- uistatusBar 详解
成功的方法: 方法1.隐藏应用程序内所有的StatusBar 第一步:在Info.plist,然后添加一个新的row,"View controller-based status bar ap ...
- 【C++】拷贝构造函数和赋值符函数
在C++中,调用拷贝构造函数有三种情况: 1.一个对象作为函数参数,以值传递的方式传入函数体. 2.一个对象作为函数返回值,以值传递的方式从函数返回. 3.一个对象用于给另外一个对象进行初始化(复制初 ...
- Web安全测试漏洞场景
HTTP.sys 远程代码执行 测试类型: 基础结构测试 威胁分类: 操作系统命令 原因: 未安装第三方产品的最新补丁或最新修订程序 安全性风险: 可能会在 Web 服务器上运行远程命 ...
- 唐顿庄园第一至五季/全集Downton Abbey迅雷下载
本季Downton Abbey 1(2010)看点:ITV古装剧剧<唐顿庄园>由曾因<高斯福德庄园>而荣获奥斯卡的金牌编剧Julian Fellowes一手打造,明星云集的演员 ...
- CURLcode的定义
经常性遇到libcurl的问题,而且都特别奇怪,记录一下CURLcode的定义: http://curl.haxx.se/libcurl/c/libcurl-errors.html #includ ...
- Build Web Apps in Node and Express视频下载
上传到百度云了,点击这里下载>> 作者使用的是Mac系统,不过Windows也差不多,主要理解express一些基本配置和使用,讲的比较基础,希望对node.js.express有兴 ...