我是一名.net 程序员但是由于公司需求,开发离线app,但是在工作的过程中我发现,周围人在写JavaScript的时候都是面向过程的编码,对于我这.net程序员,遇到这种情况真是六神无主,但是工作中还要赶进度,于是乎我就白天工作,晚上就在别人玩游戏的时候,好好的研习了一下JavaScript的面向对象的实现方式。

以下的讲解我只简单的说明一下,我这个项目中使用到的技术的简单说明。

【一】

"use strict"; 采用了严格模式 ,这样写的好处可以消除Javascript一些不合理的语法(例如:)

var temp = "7072547";

temp2 = "7452707";

这里面的temp2它是一个全局的变量,在使用严格模式的时候,会爆一个异常。详细的内容可以看严格模式详解

【二】匿名函数自调用,由于js里面没有块的概念,如果把变量定义在公共空间上,这样变量就属于一个Window 下的变量,只有当window 销毁的时候才会销毁空间

(function(win){
var _win = win;
var name = "王阳";
var qq = "7072547";
})(window)

上面的代码的好处是 我把window的处理当做局部对象,而在函数里面的变量都是局部变量这样就不会占用过多的全局空间,同时方法里面命名的变量也不会与方法外面的变量命名进行冲突。

【三】这里是重点 使用了面向对象,js 面向对象可不想其他传统语言 例如java c# 那样 对类划分的非常的清晰,js的面向对象可以说是面向于无形,你也可以理解为此时无形胜有形,为什么这样说那

C# 类的实现都是 都会有class 关键字,可是js 那!只有个function ,我刚开始写js 的时候想用面向对象都无从下手,但辛亏我在人家玩游戏的时间,好好的研习一下JavaScript,才了解原来其实function

可以算是一个特殊的对象了。

function belle(){
this.name;
} belle.display = function(){
alert(this.name);
} belle.display();

上面的代码来看函数完全有类的特性,其实上面的代码belle就是构造函数,而display就是他的静态方法。

如果把上面的代码写成这个样子be.display()就会报错 不是一个函数,其实是未找到这个方法。为什么那?

function belle(){
this.name;
} belle.display = function(){
alert(this.name);
} var be =new belle();
be.display();

在别人玩游戏的时候,好好研习了JavaScript的时候才发现,be 是对象而对象是没有原型属性的(prototype)对象只有__proto__ 内置属性 和construcor。在

var be =new belle(); 实例化的时候 会把belle 函数的prototype的地址给__proto__属性 如果 be 是个空对象 那么be下面的constructor 会指向 object,但是如果new 了之后
be下面的constructor就指向了belle();所以你在var be = new belle(); be.display() 会报找不到这个函数,因为对象在查找不到属性的情况下会向prototype里面去查找,但是上面的
代码函数只挂在constructor上面所以报会找不到的错误,上面的代码可以这样改写。
function belle(){
this.name;
} belle.display = function(){
alert(this.name);
} var be = new belle();
be.constructor.display();

这下明白了吧!

然后就是使用prototype来实现类公共方法。下面是我之前写的面向对象实现方式

function belle(){
var self = this;
self.name = "王阳";
self.qq = "7072547";
self.myMethod = function()
{
alert("name:"+self.name+" qq:"+self.qq);
}
} var be =new belle();
be.myMethod();

这样就实现了面向对象,我可以使用工厂模式等常用设计模式来改写我们的前台代码,由于现在web的前端代码越来越多,这样写的自然好处多多,但是

仔细查看上面的代码你们有没有发现个问题?

什么问题那,如果上面的代码我采用工厂模式的话,我每new一个对象,belle里面的属性和方法就要重新开辟空间,这样对大对象的操作,简直是太过美观不敢直视啊!

所以说,我采用下的方式就解决了这个问题。

function belle(){
var self = this;
self.name = "王阳";
self.qq = "7072547";
}
belle.prototype.myMethod = function(){
alert("name:"+this.name+" qq:"+this.qq);
} var be =new belle();
be.myMethod();

这样的好处是,我把公共的方法放到原型中,给大家共享,这样在每次new的时候都不会重新开辟空间,而是想原型链上进行查询。

由于本人只是后端的C#程序员,去年刚毕业,只是在工作中边工作边学习,积累一些小的经验,请各位大牛们看了,多给我点意见,而对那些小菜们,多给你们一些思路,还是那句话,要想超越别人,就在别人做其他的事情的时候,去努力,去beyond!

PS:这里注意一下 var be = new belle();你们可以这样理解

var be  = {}
belle.call(be);
be .__proto__ = belle.prototype;

由于老板又催活了,所以精彩继续,过会回来。。。

简单的记录一下JavaScript 高级应用的更多相关文章

  1. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  2. 《Javascript高级程序设计》阅读记录(七):第七章

    <Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...

  3. 《Javascript高级程序设计》阅读记录(六):第六章 下

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

  4. 《Javascript高级程序设计》阅读记录(五):第六章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

  5. 《Javascript高级程序设计》阅读记录(四):第五章 下

    这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅 ...

  6. 《Javascript高级程序设计》阅读记录(三):第五章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...

  7. 《Javascript高级程序设计》阅读记录(二):第四章

    这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较 ...

  8. 《Javascript高级程序设计》阅读记录(一):第二、三章

    <Javascript高级程序设计>阅读记录(一) 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释 ...

  9. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

随机推荐

  1. angular 响应式表单(登录实例)

    一.表单验证 1. 只有一个验证规则: this.myGroup = this.fb.group({ email:['hurong.cen@qq.com',Validators.required], ...

  2. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  3. Datasets for MachineLearning

    Public datasets for machine learning  http://homepages.inf.ed.ac.uk/rbf/IAPR/researchers/MLPAGES/mld ...

  4. python打印即时输出的方法

    >>> import sys>>> sys.stdout.flush() 但是实验了,上面的报错,应该是不对的. 实验了,下面的报错,应该是不对的. 使用 prin ...

  5. BI并不是万能,中层业务管理报表要另辟蹊径

           BI是商业智能的缩写,是能够帮助企业做出明智的业务经营决策的工具.其数据来源于各个业务系统.如ERP.CRM.SCM.进销存.HER.OA等.        BI系统不同于传统的管理信息 ...

  6. [NodeJS] Use Now alias for custom sub-domains

    Now is a great way to deploy your node application, but the generated URLs aren't memorable or easil ...

  7. Android 底部TabActivity(0)——开篇(界面分析|系列文章文件夹)

    当下主流的软件没有一个统一明白的风格,App框架什么样的都有,但个人钟情于页面底部Tab分签架构,移动设备的屏幕尽管越来越大,可是显示的内容还是有限,为了能展示很多其它的内容,方便简洁的操作习惯中Ta ...

  8. echart报表插件使用笔记(二)--按月统计

    按月统计注冊人数 java类: package com.spring.controller; import java.io.IOException; import java.sql.Connectio ...

  9. opencv播放不了AVI视频的问题

    有些avi视频的编码可能不是Cinepak Codec by Radius编码格式的,需要转换成这种格式. 我用的是swf转avi视频,在转变换时----->设置---->AVI视频设置- ...

  10. <p><img src="http://img.blog.csdn.net/20150823142545135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></p>

    /* 实现功能:用顺序表实现栈的各种操作 编译环境:Windows 64b,vc6.0 日期: 2015/7/20 作者:wtt561111 */ #define stack_max_num 10 # ...