js类、原型——学习笔记

时间:2024-06-02 08:37:50

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

  运行结果如下:

js类、原型——学习笔记

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

  运行结果如下:

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