js类、原型——学习笔记

时间:2022-03-09 03:56:19

  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 }();

  运行结果如下:

js类、原型——学习笔记

  在这里,我们用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 || {});

  运行结果如下:

js类、原型——学习笔记

  用new调用函数时,函数内部的this指向创建的对象,函数返回值也是创建的对象。return会影响直接调用函数的返回值,但不会影响new调用的函数的返回值(这个自行测试)。

  我们可以在初始化时给对象一个list属性,用来存我们的list数据。

js类、原型——学习笔记

js类、原型——学习笔记

  new以后,这个memberList对象就有了list属性。

  下面说原型。比如,我们为这个类,创建一个原型方法叫 update,我希望通过这个来更新列表的数据。

js类、原型——学习笔记

js类、原型——学习笔记

 从console中可以看出,原型方法被放在一个隐藏的 __proto__ 属性中。看对象根属性上的proto,展开所显示的不透明的,就是这个对象从类继承过来的原型方法,所有从这个类创建的对象上,都拥有这个update方法。

  于是我在update方法中可以将我的list刷新。

js类、原型——学习笔记

js类、原型——学习笔记

  可以看到 list 更新为了我们传入的数组。

  下面又创建了一个 getData方法,用来获取这个对象上的list数据。

js类、原型——学习笔记

js类、原型——学习笔记

  这就是最有名的 set 和 get方法。

 

最后,感谢大神CX的讲解。