简单的记录一下JavaScript 高级应用
我是一名.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 高级应用的更多相关文章
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 《Javascript高级程序设计》阅读记录(七):第七章
<Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...
- 《Javascript高级程序设计》阅读记录(六):第六章 下
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
- 《Javascript高级程序设计》阅读记录(五):第六章 上
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
- 《Javascript高级程序设计》阅读记录(四):第五章 下
这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅 ...
- 《Javascript高级程序设计》阅读记录(三):第五章 上
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...
- 《Javascript高级程序设计》阅读记录(二):第四章
这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较 ...
- 《Javascript高级程序设计》阅读记录(一):第二、三章
<Javascript高级程序设计>阅读记录(一) 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释 ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
随机推荐
- P2P网贷-借款与发标
P2P网贷-借款与发标 关于借款,我想说,需要资金的人真的很多.贷款利率不太高的情况下,借款客户相对而言还是比较好开发的, 比较难的是,确保客户能按时还款.目前,信用还是比较混乱的. 借款来源,客户 ...
- 【例题 6-17 UVa 10562】Undraw the Trees
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟+递归 [代码] #include <bits/stdc++.h> using namespace std; con ...
- Spring Boot 动态数据源(Spring 注解数据源)
本文实现案例场景:某系统除了需要从自己的主要数据库上读取和管理数据外,还有一部分业务涉及到其他多个数据库,要求可以在任何方法上可以灵活指定具体要操作的数据库. 为了在开发中以最简单的方法使用,本文基于 ...
- poj1679 The Unique MST(判定次小生成树)
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 23180 Accepted: 8235 D ...
- TTS-零基础入门之语音模板化
上篇介绍了TTS的一个简单样例http://blog.csdn.net/u010176014/article/details/47326413 本篇咱们进一步聊聊 语音怎样读模板. 比方 公交车上的模 ...
- Microsoft iSCSI Software Target 快照管理
Microsoft iSCSI Software Target 支持快照管理,可以对设备进行手工创建快照.快照任务计划.快照回滚等操作. 首先配置iscsi 目标及设备映射关系,并在客户端通过发起程序 ...
- 【b091&&z11】潜伏者
Time Limit: 1 second Memory Limit: 128 MB [问题描述] R国和S国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历尽艰险后,潜伏于S国的R国间谍小 ...
- Spring-Boot整合freemarker引入静态资源css、js等(转)
一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate betwee ...
- 云应用开发之新浪SAE读写云端数据库MySQL
本博文为前篇博文新浪云应用SAE日志查看的延续. 在读写云数据库MySQL之前,须要说明的是,在新浪云平台上使用数据库时.该平台默认会为每个应用单独新建一个数据库database实例.在该实例中再创建 ...