博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单的记录一下JavaScript 高级应用
阅读量:7085 次
发布时间:2019-06-28

本文共 2686 字,大约阅读时间需要 8 分钟。

    我是一名.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;

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

 

转载于:https://www.cnblogs.com/TF12138/p/4308287.html

你可能感兴趣的文章
AI学习笔记之——强化学习(Reinforcement Learning, RL)
查看>>
三星给自家的Gear VR手机头显配上了运动手柄,下月开卖
查看>>
玩转无线电 -- 温哥华天车 RFID 票务系统
查看>>
CentOS6上Hadoop集群中服务器cpu sys态异常的定位与解决
查看>>
git mv使用
查看>>
[UWP小白日记-2]SQLite数据库DOME
查看>>
网络号与主机号的计算
查看>>
Oracle数据库重复数据删除的三种情况
查看>>
clearfix清除浮动
查看>>
文件的基本操作
查看>>
Java运算符使用
查看>>
基本数据类型,包装类型,String类型数据之间的转换
查看>>
网络出口 NAT 配置实例
查看>>
C#如何进行多线程编程
查看>>
Exchange 日常管理之一:用户邮箱完全访问权限
查看>>
CloudStack 由于【辅助】二级存储名称配置错误引发的SSVM创建失败
查看>>
Android Studio - 第四十四期 倒计时
查看>>
负载均衡集群中如何隐藏VIP
查看>>
CUDA编程接口:使用nvcc编译器的兼容性
查看>>
IOS学习——UI基础UIWindow、UIView(五)
查看>>