博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何封装自己的js类库
阅读量:6282 次
发布时间:2019-06-22

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

hot3.png

js中的很多变量(除了基本数据类型数字和字符串之外)可以看成类似java中的class是经过实例化的对象,有自己的成员方法,和成员变量。比如:window对象表示一个浏览器窗口或一个框架,在js中,window对象是全局对象,如图下图所示。 

接下来谈谈,如何实现自己的类库,先展示一个最简单的例子:

(function(a) {    function Person(name, age) {        this.name = name;        this.age = age;    }    Person.prototype = {        constructor : Person,        getName : function() {            return this.name;        },        getAge : function() {            return this.age;        }    }    a.Person = Person;})(window);

` 注意点:

1:为何要用自执行匿名函数这种闭包形式?

为了防止命名空间污染。下面举例子说明下:

第一种:

(function(a) {    var name = "zhangsan";    function A(name) {        this.name = name;    }    a.A= A;})(window);

第二种:

var name = "zhangsan";function A(name) {    this.name = name;}

如果我们new A()对象的时候,第一种不会对window对象的name属性有影响,而第二种则会对window对象的name属性产生影响。

2:如何理解函数中this?

通常在函数内部用this定义变量时,变量是存在于当前this指向的对象。 如果直接调用函数,那么this指向的可能是window对象;

Person("zhangsan", 20);console.log(window.age); //输出为 20

如果通过new来生成函数对象,那么this就一定是指向这个新产生的对象。

var p = new Person("zhangsan", 30);console.log(p.age); //输出为 30

两个age,一个是全局window对象的变量,一个是Person实例化对象的变量 说明:js中的通过this给变量赋值,实际上是这个变量属于当前this指向的对象。

3:为什么不能使用var声明所封装的类的属性

因为在自执行匿名函数中var定义的是当前作用域的局部变量,当js脚本运行完,这个变量就会销毁,及时在我们new出新的对象之后,这个变量也不能成为对象的属性;有一种情况特殊,在window作用域下通过var声明变量,那么这个变量就会一直存在,但这样也就失去封装类的意义了,一定要将变量封装为对象的属性。

转载于:https://my.oschina.net/chenhao901007/blog/417696

你可能感兴趣的文章
我的友情链接
查看>>
lvs+keepalived实现web负载及高可用
查看>>
C# 分享几个ip的方法吧,包括正则验证ip
查看>>
sudo apt-get 与 yum安装有啥区别
查看>>
在 jQuery Repeater 进行验证更新等操作时提示消息
查看>>
2018-2019-2 20162329 《网络对抗技术》Exp7: 网络欺诈防范
查看>>
iPhone NSBundle的使用
查看>>
Memory Cache(内存缓存)
查看>>
Java技术相关
查看>>
操作系统概述总结
查看>>
北京程序员 VS 硅谷程序员(转)
查看>>
[AX]AX2012 使用视图
查看>>
20161108学习笔记
查看>>
手把手教你把Vim改装成一个IDE编程环境(图文)
查看>>
Git: 在CentOS上设置共享Repository
查看>>
精心挑选
查看>>
nextcloud 15 Could not open input file: occ
查看>>
串口编程C++实例(CE) .
查看>>
【形式化方法:VDM++系列】3.基于VDM++的图书管理系统需求定义
查看>>
No component factory found for ListenerAddComponent. Did you add it to @NgModule.entryComponents?
查看>>