js类、原型——学习笔记

　　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的讲解。