如何封装自己的js类库

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值