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