js类、原型——学习笔记

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

  运行结果如下:

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

  运行结果如下:

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

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

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

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

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

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

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

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

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

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

时间: 2024-12-26 10:18:23

js类、原型——学习笔记的相关文章

node.js框架StrongLoop学习笔记(一)

node.js框架StrongLoop学习笔记(一) 本人在用node.js做手机后台,查找框架发现StrongLoop挺适合,可是却发现没有中文教程,于是在自己学习时,做一下笔记,以方便其他像我一样的人参考(本人的英语水平非常差,只能一点点试着做,并记录下来,如果大家发现问题,请通知我好更正,谢谢了!).所有操作都是在CentOS7-x64,Node.js 0.12.2下完成的. nodejs框架StrongLoop学习笔记一 安装StrongLoop 创建项目 安装数据库驱动 配置数据库连接

初探C++类模版学习笔记

类模板 实现:在定义类的时候给它一个或多个参数,这个些参数表示不同的数据类型.                              -->抽象的类. 在调用类模板时, 指定参数, 由编译系统根据参数提供的数据类型自动产生相应的模板类                   -->具体的类. 类模板的定义 C++的类模板的写法如下: template <类型参数表> //类型参数表的写法就是:class 类型参数1, class 类型参数2, - class 类模板名 { 成员函数

JS原型学习笔记

1.原型是函数对象的属性,它的初始值是一个空对象,这个prototype原型对象可以添加方法和属性. 2.构造器对象查找属性和方法时先查找构造器后查找原型. 3.若构造器中的属性和原型中的属性相同,构造器的优先级会高于原型. 4.枚举属性(for-in) (1).数组枚举 var a=[1,2,3]; for(var i in a){ console.log(a[i]); } (2).对象枚举 var a={name:"gao",age:"18",sex:"

《JS高程》对象&amp;原型学习笔记

ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数. 6.1.理解对象 创建自定义对象的两种方式: (1)创建一个 Object 的实例: var person = new Object(); (2)对象字面量(首选): var person = {}; ---------------------------------------------------------

js的dom学习笔记一

前言: 我现在不好定位自己程序编写的技术的好坏,新手吧.DOM是实现js脚本连接上HTML文档的一个API,才接触jquery一两天,大概能明白,所谓的框架,就是在原生态的基础上做出的函数库,里面的方法.属性都是要使用该框架的对象来调用的.相比于jquery,DOM不是框架,虽然它们都能实现操控网页文档元素,DOM更加底层,dom的方法.属性直接面对文档元素来使用,而jquery要面向jquery对象来使用. DOM 是一个可以让javaScript脚本操控HTML元素.css属性的一套w3c标

js对象的学习笔记(仅供参考)

一.面向对象语言的基本特征: 抽象.封装.继承.多态 封装:将抽象的数据和对数据的操作封装在一起,数据被保护在内部,程序的其他部分只有通过被授权的操作(成员方法),才能对数据进行操作 继承:由一个或多个类得来类的类的属性和方法的能力,一个类可以继承(extends)父类中的(public/protect)属性和(public/protect)方法,继承可以解决代码复用问题 多态:编写能以多种方法运行的函数或方法的能力 JS对象类型:本地对象.宿主对象(浏览器对象).内置对象 本地对象:独立于宿主

Vue.js 源码学习笔记 -- 分析前准备 待续

主体 实例方法归类: data     数据方法 dom     dom方法 event    事件处理 lifecycl   生命周期函数 init 初始化vue页面 全局方法: derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ] 重点: 把数据(Model)

Javascript原型学习笔记

三个基本概念:构造函数.原型.实例   每一个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型的内部指针(__proto__). emp1: function Foo(y){ this.y = y ; } Foo.prototype.x = 10; Foo.prototype.calculate = function(z){ return this.x+this.y+z; }; var b = new Foo

NODE.JS开发指南学习笔记2

1.核心模块 核心模块是Node.js的心脏,由一些精简高效的库组成,为其提供了基本的API.2.全局对象 global.所有的的全局变量都是其属性.其根本的作用是作为全局变量的宿主.3.全局变量 1.process:描述当前Node.js的进程状态的对象,提供一个与操作系统的简单接口. 方法 process.argv 命令行参数数组 三个参数1.node 2.脚本文件名 3.运行参数 1.process.stdout: 标准输出流,通常使用的console.log()向标准输出打印字符,而pr