js 内置有很多类,我们用的,都是从这些类实例化出来的。
function Object () {}
function Array () {}
function String () {}
function Boolean () {}
function Function () {}
比如,var a = {};等同于var a = new Object();
var a =[];等同于var a = new Array();
现在我们要创建一个自定义的类。在SmartList.js中写下以下代码:
+ function (Flexx) {
'use strict'; function SmartList(){
//构造函数,在这个类被new出来时执行这里的代码
console.log('创建了一个SmartList对象');
console.log(this);
} Flexx.SmartList = SmartList;//把类赋值给了xx全局对象 }(window.xx = window.xx || {});
在main.js中这样调用:
+ function () {
'use strict'; var memberList = new xx.SmartList();
console.log(memberList); }();
运行结果如下:
在这里,我们用new调用了xx.SmartList(),new 使函数变成一个构造函数,会默默为我们做一些事情,比如创建了一个对象,把this指向了这个对象,并且最后返回了这个对象。
下面来看看new调用函数和直接调用函数有什么不同。
+ function (Flexx) {
'use strict'; function SmartList(){
console.log('创建了一个SmartList对象');
console.log(this);
} var list1 =SmartList();
var list2 = new SmartList();
console.log('list1 是', list1);
console.log('list2 是', list2); Flexx.SmartList = SmartList; }(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的讲解。