js 内置有很多类,我们用的,都是从这些类实例化出来的。
1 function Object () {} 2 function Array () {} 3 function String () {} 4 function Boolean () {} 5 function Function () {}
比如,var a = {};等同于var a = new Object();
var a =[];等同于var a = new Array();
现在我们要创建一个自定义的类。在SmartList.js中写下以下代码:
1 + function (Flexx) { 2 'use strict'; 3 4 function SmartList(){ 5 //构造函数,在这个类被new出来时执行这里的代码 6 console.log('创建了一个SmartList对象'); 7 console.log(this); 8 } 9 10 Flexx.SmartList = SmartList;//把类赋值给了xx全局对象 11 12 }(window.xx = window.xx || {});
在main.js中这样调用:
1 + function () { 2 'use strict'; 3 4 var memberList = new xx.SmartList(); 5 console.log(memberList); 6 7 }();
运行结果如下:
在这里,我们用new调用了xx.SmartList(),new 使函数变成一个构造函数,会默默为我们做一些事情,比如创建了一个对象,把this指向了这个对象,并且最后返回了这个对象。
下面来看看new调用函数和直接调用函数有什么不同。
1 + function (Flexx) { 2 'use strict'; 3 4 function SmartList(){ 5 console.log('创建了一个SmartList对象'); 6 console.log(this); 7 } 8 9 var list1 =SmartList(); 10 var list2 = new SmartList(); 11 console.log('list1 是', list1); 12 console.log('list2 是', list2); 13 14 Flexx.SmartList = SmartList; 15 16 }(window.xx = window.xx || {});
运行结果如下:
用new调用函数时,函数内部的this指向创建的对象,函数返回值也是创建的对象。return会影响直接调用函数的返回值,但不会影响new调用的函数的返回值(这个自行测试)。
我们可以在初始化时给对象一个list属性,用来存我们的list数据。
new以后,这个memberList对象就有了list属性。
下面说原型。比如,我们为这个类,创建一个原型方法叫 update,我希望通过这个来更新列表的数据。
从console中可以看出,原型方法被放在一个隐藏的 __proto__ 属性中。看对象根属性上的proto,展开所显示的不透明的,就是这个对象从类继承过来的原型方法,所有从这个类创建的对象上,都拥有这个update方法。
于是我在update方法中可以将我的list刷新。
可以看到 list 更新为了我们传入的数组。
下面又创建了一个 getData方法,用来获取这个对象上的list数据。
这就是最有名的 set 和 get方法。
最后,感谢大神CX的讲解。