javascript 在对象中使用 定时器_如何使用JavaScript 面向对象编程

d16decd41fe7734d506eab63ef081f7e.gif

学习目标

理解面向对象开发思想

掌握 JavaScript 面向对象开发相关模式

面向对象介绍

什么是对象

Everything is object (一切皆对象)

我们可以从两个层次来理解对象:

(1) 对象是单个事物的抽象。

    一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。

(2) 对象是一个容器,封装了属性(property)和方法(method)。

    属性是对象的状态,方法是对象的行为(完成某种任务)。比如,我们可以把动物抽象为animal对象,使用“属性”记录具体是那一种动物,使用“方法”表示动物的某种行为(奔跑、捕猎、休息等等)。

    在实际开发中,对象是一个抽象的概念,可以将其简单理解为:数据集或功能集。ECMAScript-262 把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数。严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都 映射到一个值。

提示:每个对象都是基于一个引用类型创建的,这些类型可以是系统内置的原生类型,也可以是开发人员自定义的类型。

什么是面向对象

面向对象不是新的东西,它只是过程式代码的一种高度封装,目的在于提高代码的开发效率和可维护性。

    面向对象编程 —— Object Oriented Programming,简称 OOP ,是一种编程开发思想。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。

    在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。

面向对象与面向过程区别:

  • 面向过程就是亲力亲为,事无巨细,面面俱到,步步紧跟,有条不紊。

  • 面向对象就是找一个对象,指挥得结果。

  • 面向对象将执行者转变成指挥者。

  • 面向对象不是面向过程的替代,而是面向过程的封装。

面向对象的特性:

  • 封装性

  • 继承性

  • 多态性

JavaScript 中面向对象的基本体现

    在 JavaScript 中,所有数据类型都可以视为对象,当然也可以自定义对象。自定义的对象数据类型就是面向对象中的类( Class )的概念。

    我们以一个例子来说明面向过程和面向对象在程序流程上的不同之处。

    假设我们要处理学生的成绩表,为了表示一个学生的成绩,面向过程的程序可以用一个对象表示:

var std1 = { name: '张三', score: 98 }var std2 = { name: '李四', score: 81 }

    而处理学生成绩可以通过函数实现,比如打印学生的成绩:

function printScore (student) {  console.log('姓名:' + student.name + '  ' + '成绩:' + student.score)}

    如果采用面向对象的程序设计思想,我们首选思考的不是程序的执行流程, 而是 Student 这种数据类型应该被视为一个对象,这个对象拥有 name 和 score 这两个属性(Property)。如果要打印一个学生的成绩,首先必须创建出这个学生对应的对象,然后,给对象发一个 printScore 消息,让对象自己把自己的数据打印出来。

抽象数据行为模板(Class):

function Student (name, score) {  this.name = name  this.score = score}Student.prototype.printScore = function () {  console.log('姓名:' + this.name + '  ' + '成绩:' + this.score)}

根据模板创建具体实例对象(Instance):

var std1 = new Student('张三', 98)var std2 = new Student('李四', 81)

实例对象具有自己的具体行为(给对象发消息):

std1.printScore() // => 姓名:张三  成绩:98std2.printScore() // => 姓名:李四  成绩 81

    面向对象的设计思想是从自然界中来的,因为在自然界中,类(Class)和实例(Instance)的概念是很自然的。Class 是一种抽象概念,比如我们定义的 Class——Student ,是指学生这个概念, 而实例(Instance)则是一个个具体的 Student ,比如, 张三 和 李四 是两个具体的 Student 。

面向对象的设计思想是:

  • 抽象出 Class

  • 根据 Class 创建 Instance

  • 指挥 Instance 得结果

    面向对象的抽象程度比函数要高,因为一个 Class 既包含数据,又包含操作数据的方法。

JavaScript 如何创建对象

字面量方式

    我们可以直接通过 new Object() 创建:

var person = new Object()person.name = '张三'person.age = 18person.sayName = function () {  console.log(this.name)}

    每次创建通过 new Object() 比较麻烦,所以可以通过它的简写形式对象字面量来创建:

var person = {  name: '张三',  age: 18,  sayName: function () {    console.log(this.name)  }}

    上面的写法是没有问题的,但是假如我们要生成两个 person 实例对象呢?

var person1 = {  name: '张三',  age: 18,  sayName: function () {    console.log(this.name)  }}var person2 = {  name: '李四',  age: 16,  sayName: function () {    console.log(this.name)  }}

    通过上面的代码我们不难看出,这样写的代码太过冗余,重复性太高。

简单方式的改进:工厂函数

    我们可以写一个函数,解决上边代码重复的问题:

function createPerson (name, age) {  return {    name: name,    age: age,    sayName: function () {      console.log(this.name)    }  }}

    生成实例对象:

var p1 = createPerson('张三', 18)var p2 = createPerson('李四', 18)

    这样封装比上边的方式好多了,通过工厂模式我们解决了创建多个相似对象代码冗余的问题, 但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

更优雅的工厂函数:构造函数

    一种更优雅的工厂函数就是下面这样,构造函数:

function Person (name, age) {  this.name = name  this.age = age  this.sayName = function () {    console.log(this.name)  }}var p1 = new Person('张三', 18)p1.sayName() // => 张三var p2 = new Person('李四', 23)p2.sayName() // => 李四

    在上面的示例中,Person() 函数取代了 createPerson() 函数,但是实现效果是一样的。这是为什么呢?

    我们注意到,Person() 中的代码与 createPerson() 有以下几点不同之处

  1. 没有显示的创建对象

  2. 直接将属性和方法赋给了 this 对象

  3. 没有 return 语句

  4. 函数名使用的是大写的 Person

构造函数代码执行过程

    要创建 Person 实例,则必须使用 new 操作符。以这种方式调用构造函数会经历以下 4 个步骤:

  1. 创建一个新对象。

  2. 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)。

  3. 执行构造函数中的代码。

  4. 返回新对象。

    下面是具体的伪代码:

function Person (name, age) {  // 当使用 new 操作符调用 Person() 的时候,实际上这里会先创建一个对象  // var instance = {}  // 然后让内部的 this 指向 instance 对象  // this = instance  // 接下来所有针对 this 的操作实际上操作的就是 instance  this.name = name  this.age = age  this.sayName = function () {    console.log(this.name)  }  // 在函数的结尾处会将 this 返回,也就是 instance  // return this}

构造函数和实例对象的关系

    使用构造函数的好处不仅仅在于代码的简洁性,更重要的是我们可以识别对象的具体类型了。在每一个实例对象中的_proto_中同时有一个 constructor 属性,该属性指向创建该实例的构造函数:

console.log(p1.constructor === Person) // => trueconsole.log(p2.constructor === Person) // => trueconsole.log(p1.constructor === p2.constructor) // => true

    对象的 constructor 属性最初是用来标识对象类型的, 但是,如果要检测对象的类型,还是使用 instanceof 操作符更可靠一些:

console.log(p1 instanceof Person) // => trueconsole.log(p2 instanceof Person) // => true

总结:

  1. 构造函数是根据具体的事物抽象出来的抽象模板。

  2. 实例对象是根据抽象的构造函数模板得到的具体实例对象。

  3. 每一个实例对象都具有一个 constructor 属性,指向创建该实例的构造函数。( 此处constructor 是实例的属性的说法不严谨,具体后面的原型会讲到)

  4. 可以通过实例的 constructor 属性判断实例和构造函数之间的关系。(这种方式不严谨,推荐使用 instanceof 操作符,后面学原型会解释为什么)

构造函数的问题

    使用构造函数带来的最大的好处就是创建对象更方便了,但是其本身也存在一个浪费内存的问题:

function Person (name, age) {  this.name = name  this.age = age  this.type = '学生'  this.sayHello = function () {    console.log('hello ' + this.name)  }}var p1 = new Person('王五', 18)var p2 = new Person('李四', 16)

    上边的代码,从表面看上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type和 sayHello 都是一模一样的内容, 每一次生成一个实例,都必须为重复的内容,多占用一些内存,如果实例对象很多,会造成极大的内存浪费。

console.log(p1.sayHello === p2.sayHello) // => false

    对于这种问题我们可以把需要共享的函数定义到构造函数外部:

function sayHello = function () {  console.log('hello ' + this.name)}function Person (name, age) {  this.name = name  this.age = age  this.type = '学生'  this.sayHello = sayHello}var p1 = new Person('王五', 18)var p2 = new Person('李四', 16)console.log(p1.sayHello === p2.sayHello) // => true

    这样确实可以了,但是如果有多个需要共享的函数的话就会造成全局命名空间冲突的问题。如何解决这个问题呢?你肯定想到了可以把多个函数放到一个对象中用来避免全局命名空间冲突的问题:

var fns = {  sayHello: function () {    console.log('hello ' + this.name)  },  sayAge: function () {    console.log(this.age)  }}function Person (name, age) {  this.name = name  this.age = age  this.type = '学生'  this.sayHello = fns.sayHello  this.sayAge = fns.sayAge}var p1 = new Person('王五', 18)var p2 = new Person('李四', 16)console.log(p1.sayHello === p2.sayHello) // => trueconsole.log(p1.sayAge === p2.sayAge) // => true

    至此,我们利用自己的方式基本上解决了构造函数的内存浪费问题。但是代码看起来还是那么的格格不入,那有没有更好的方式呢?

原型

更好的解决方案:prototype

    Javascript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

    这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

function Person (name, age) {  this.name = name  this.age = age}console.log(Person.prototype)Person.prototype.type = '学生'Person.prototype.sayName = function () {  console.log(this.name)}var p1 = new Person(...)var p2 = new Person(...)console.log(p1.sayName === p2.sayName) // => true

    这时所有实例的 type 属性和 sayName() 方法, 其实都是同一个内存地址,指向 prototype 对象,因此就提高了运行效率。

 构造函数、实例、原型三者之间的关系

be3cba2c4a830467a64fafe22e87d6c8.png

    任何函数都有一个 prototype 属性,该属性是一个对象。

function F () {}console.log(F.prototype) // => objectF.prototype.sayHi = function () {  console.log('hi!')}

    构造函数的 prototype 对象默认都有一个 constructor 属性,指向 prototype 对象所在函数。

console.log(F.constructor === F) // => true

    通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__。

var instance = new F()console.log(instance.__proto__ === F.prototype) // => true

`__proto__` 是非标准属性。

实例对象可以直接访问原型对象成员:

instance.sayHi() // => hi!

总结:

  1. 任何函数都具有一个 prototype 属性,该属性是一个对象。

  2. 构造函数的 prototype 对象默认都有一个 constructor 属性,指向 prototype 对象所在函数。

  3. 通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__。

  4. 所有实例都直接或间接继承了原型对象的成员。

属性成员的搜索原则:原型链

    了解了 构造函数-实例-原型对象 三者之间的关系后,接下来我们来解释一下为什么实例对象可以访问原型对象中的成员

    每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。

  1. 搜索首先从对象实例本身开始。

  2. 如果在实例中找到了具有给定名字的属性,则返回该属性的值。

  3. 如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。

  4. 如果在原型对象中找到了这个属性,则返回该属性的值。

也就是说,在我们调用 person1.sayName() 的时候,会先后执行两次搜索:

  1. 首先,解析器会问:

    “实例 person1 有 sayName 属性吗?

    ”答:

    “没有。

  2. 然后,它继续搜索,再问:“ person1 的原型有 sayName 属性吗?”答:“有。

  3. 于是,它就读取那个保存在原型对象中的函数。

  4. 当我们调用 person2.sayName() 时,将会重现相同的搜索过程,得到相同的结果。

    这就是多个对象实例共享原型所保存的属性和方法的基本原理。

总结:

  1. 先在自己身上找,找到即返回。

  2. 自己身上找不到,则沿着原型链向上查找,找到即返回。

  3. 如果一直到原型链的末端还没有找到,则返回 undefined。

实例对象读写原型对象成员

读取:

  1. 先在自己身上找,找到即返回。

  2. 自己身上找不到,则沿着原型链向上查找,找到即返回。

  3. 如果一直到原型链的末端还没有找到,则返回 undefined。

值类型成员写入(实例对象.值类型成员 = xx):

  1. 当实例期望重写原型对象中的某个普通数据成员时实际上会把该成员添加到自己身上。

  2. 也就是说该行为实际上会屏蔽掉对原型对象成员的访问。

引用类型成员写入(实例对象.引用类型成员 = xx):同上。

复杂类型修改(实例对象.成员.xx = xx):

  1. 同样会先在自己身上找该成员,如果自己身上找到则直接修改。

  2. 如果自己身上找不到,则沿着原型链继续查找,如果找到则修改。

  3. 如果一直到原型链的末端还没有找到该成员,则报错(实例对象.undefined.xx = xx)。

更简单的原型语法

    我们注意到,前面例子中每添加一个属性和方法就要敲一遍 Person.prototype 。 为减少不必要的输入,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象:

function Person (name, age) {  this.name = name  this.age = age}Person.prototype = {  type: '学生',  sayHello: function () {    console.log('我叫' + this.name + ',我今年' + this.age + '岁了')  }}

    在该示例中,我们将 Person.prototype 重置到了一个新的对象。这样做的好处就是为 Person.prototype 添加成员简单了,但是也会带来一个问题,那就是原型对象丢失了 constructor 成员。

    所以,我们为了保持 constructor 的指向正确,建议的写法是:

function Person (name, age) {  this.name = name  this.age = age}Person.prototype = {  constructor: Person, // => 手动将 constructor 指向正确的构造函数  type: '学生',  sayHello: function () {    console.log('我叫' + this.name + ',我今年' + this.age + '岁了')  }}

原生对象的原型

所有函数都有 prototype 属性对象。

Object.prototype

Function.prototype

Array.prototype

String.prototype

Number.prototype

Date.prototype

...

    为数组对象和字符串对象扩展原型方法:

//为内置对象添加原型方法//我们在系统的对象的原型中添加方法,相当于在改变源码//我希望字符串中有一个倒序字符串的方法String.prototype.myReverse = function() {for (var i = this.length - 1; i >= 0; i--) {console.log(this[i]);}};var str = "abcdefg";str.myReverse();//为Array内置对象的原型对象中添加方法Array.prototype.mySort = function() {for (var i = 0; i < this.length - 1; i++) {for (var j = 0; j < this.length - 1 - i; j++) {if (this[j] < this[j + 1]) {var temp = this[j];this[j] = this[j + 1];this[j + 1] = temp;} //end if} // end for} //end for};var arr = [100, 3, 56, 78, 23, 10];arr.mySort();console.log(arr);String.prototype.sayHi = function() {console.log(this + "哈哈,我又变帅了");};//字符串就有了打招呼的方法var str2 = "小杨";str2.sayHi();

原型对象的一些问题

  • 共享数组

  • 共享对象

    如果真的希望可以被实例对象之间共享和修改这些共享数据那就不是问题。但是如果不希望实例之间共享和修改这些共享数据则会出现问题。一个更好的建议是,最好不要让实例之间互相共享数组或者对象成员,一旦修改的话会导致数据的走向很不明确而且难以维护。

原型对象使用建议:

  1. 私有成员(一般就是非函数成员)放到构造函数中。

  2. 共享成员(一般就是函数)放到原型对象中。

  3. 如果重置了 prototype 记得修正 constructor 的指向。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

char数组转string_String类和其它数据类型的相互转换

对于上面的这些包装类&#xff0c;除了Character以外&#xff0c;都有可以直接使用字符串参数的构造函数&#xff0c;这也就使得我们将String类转换为这些数据类型变得相当之简单&#xff0c;即&#xff1a;Boolean(String s)、Integer(String s)、Long(String s)、Float(Strin…

ORACLE 各种闪回操作

1、Flashback Database&#xff08;利用闪回日志恢复&#xff09; Oracle Flashback Database特性允许通过SQL语句Flashback Database语句&#xff0c;让数据库前滚到当前的前一个时间点或者SCN&#xff0c;而不需要做时间点的恢复。闪回数据库可以迅速将数据库回到误操作或人为…

【转】介绍设置Session失效的几种方法

转载地址&#xff1a;http://developer.51cto.com/art/201106/269493.htm Session对象是HttpSessionState的一个实例。该类为当前用户会话提供信息&#xff0c;还提供对可用于存储信息会话范围的缓存的访问&#xff0c;以及控制如何管理会话的方法。下面介绍设置session失效的几…

mysql导入数据load data infile用法整理

有时候我们需要将大量数据批量写入数据库&#xff0c;直接使用程序语言和Sql写入往往很耗时间&#xff0c;其中有一种方案就是使用MySql Load data infile导入文件的形式导入数据&#xff0c;这样可大大缩短数据导入时间。 假如是从MySql客户端调用&#xff0c;将客户端的文件导…

python3循环一直到一个值结束_一步一步学Python3(小学生也适用) 第十七篇:循环语句for in循环...

一、Python for in循环Python for in 循环&#xff0c;是用来遍历任何数据序列&#xff0c;如一个列表&#xff0c;一个字符串&#xff0c;一个字典&#xff0c;一个元组等。for in 循环的一般语法如下&#xff1a;for item in 序列:语句块else:语句块for in 字符串&#xff1…

设置Jupyter notebook 默认工作路径,修改Jupyter notebook 默认浏览器为Chrome

这里写目录标题一 设置Jupyter notebook 默认工作路径二 修改Jupyter notebook 默认浏览器为Chrome一 设置Jupyter notebook 默认工作路径 安装好anaconda 后&#xff0c;jupyter notebook默认是有安装好的。在windows的菜单栏找到anaconda目录&#xff0c;如下图 鼠标右键点…

python调用c#注意事项_Python调用C#编写的DLL

起因是工作中需要用的开发编写的DLL&#xff0c;但是它是使用C#编写的&#xff0c;本人不想使用C#去写测试代码&#xff0c;所以需要使用Python来掉这个DLL内的方法 就用这个就很好&#xff0c;不要问为啥不用微软的Ironpython和别的啥&#xff0c;好用就行了&#xff0c;解决问…

jquery实战--定宽

大家有没有遇到过一个问题&#xff0c;就是一个列表&#xff0c;或是一段文字过多时&#xff0c;截取多余的部分用省略号&#xff0c;好吧&#xff0c;证明你实力的时候到了&#xff0c;我下面先分解一下方法&#xff0c;再用插件写出来,首先我们说的是&#xff0c;用到的第一个…

struts2 Action获取表单数据

1.通过属性驱动式 1.首先设置 表单中的数据的name值 如&#xff1a;<input type"text" name"username" value""> 2.你用的是struts2&#xff0c;那么就在java类中写一个变量&#xff1a;变量名和页面上的name值一致 并有这个变量的get 和…

python 计算器 eval ctf_CTF逆向--.NET与Python篇

题目(来源&#xff1a;Jarvis-OJ)&#xff1a;Classical CrackmeClassical CrackMe2FindKeyLoginClassical Crackme首先查壳没有壳&#xff0c;不过发现这是一个.net的程序&#xff0c;将其拖进dnSpy中&#xff0c;找到主程序&#xff0c;同时发现关键代码&#xff0c;如下所示…

2016年秋季个人阅读计划

阅读书目&#xff1a;《软件需求十步走》 读后感发表日期&#xff1a;阅读书目&#xff1a;《用户故事与敏捷方法》 读后感发表日期&#xff1a;第一篇&#xff1a;10月1日 第二篇&#xff1a;10月3日 第三篇&#xff1a;10月7日 第四篇&#xff1a;10月15日 第五篇&#xff1a…

第10章 Python 数字图像处理(DIP) - 图像分割 基础知识 标准差分割法

This Chapter is all about image segmentation. I still not finished whole chapter, but here try to publish some for reference. 这里写目录标题基础知识import sys import numpy as np import cv2 import matplotlib import matplotlib.pyplot as plt import PIL from …

OFBiz的探索进阶

主要参照https://cwiki.apache.org/OFBIZ/ofbiz-tutorial-a-beginners-development-guide.html这个教程&#xff0c;实现的过程教程上很详细&#xff0c;故这里不多说 还参考了下http://www.hotwaxmedia.com/apache-ofbiz-blog/ofbiz/ofbiz-tutorials/ofbiz-tutorial-building-…

python3语法都相同吗_python2 与 python3 语法区别--转

原文地址&#xff1a;http://old.sebug.net/paper/books/dive-into-python3/porting-code-to-python-3-with-2to3.html 使用2to3将代码移植到Python 3 ❝ Life is pleasant. Death is peaceful. It’s the transition that’s troublesome. ❞ — Isaac Asimov (attributed) 概…

对GCD的一些理解和实践

对GCD的一些理解和实践GCD GCD&#xff0c;全程Grand Central Dispatch&#xff0c;是苹果为了多核并行提出的解决方案。它是使用C语言实现&#xff0c;但是由于用了block来处理回调&#xff0c;所以使用起来十分方便。并且GCD会自动管理线程的生命周期&#xff0c;不需要我们去…

python scrapy爬虫遇见301_在Pycharm中运行Scrapy爬虫项目的基本操作

目标在Win7上建立一个Scrapy爬虫项目&#xff0c;以及对其进行基本操作。运行环境&#xff1a;电脑上已经安装了python(环境变量path已经设置好)&#xff0c;以及scrapy模块&#xff0c;IDE为Pycharm 。操作如下&#xff1a;一、建立Scrapy模板。进入自己的工作目录&#xff0c…

[Buzz Today]2012.08.08

# Dark Reign 2 源代码现身Google Code Pandemic工作室开发的即时战略游戏《Dark Reign 2》源代码被泄露到了Google Code http://code.google.com/p/darkreign2/ # Warsow 1.0发布 Set in a futuristic cartoonish world, Warsow is a completely free fast-paced first-person…

PyTorch训练中Dataset多线程加载数据,比Dataloader里设置多个workers还要快

PyTorch训练中Dataset多线程加载数据&#xff0c;而不是在DataLoader 背景与需求 现在做深度学习的越来越多人都有用PyTorch&#xff0c;他容易上手&#xff0c;而且API相对TF友好的不要太多。今天就给大家带来最近PyTorch训练的一些小小的心得。 大家做机器学习、深度学习都…

Trading

http://v.youku.com/v_show/id_XMTA0OTcxMjgw.html?fromy1.2-1-87.3.8-1.1-1-1-7 转载于:https://www.cnblogs.com/wangjianping/p/3705524.html

算法9---二叉树的遍历不用栈和递归

二叉树的遍历不用栈和递归 转自&#xff1a;ACM之家 http://www.acmerblog.com/inorder-tree-traversal-without-recursion-and-without-stack-5988.html我们知道&#xff0c;在深度搜索遍历的过程中&#xff0c;之所以要用递归或者是用非递归的栈方式&#xff0c;参考二叉树非…