建设金融网站哪家好,商业网站的建设流程,做外贸那里发广告网站,苏州工业园区服务外包职业学院一. JavaScript的对象
传统的面向对象 面向对象语言的一个标志就是类类是所有对象的统称, 是更高意义上的一种抽象. 对象是类的实例.通过类我们可以创建任意多个具体的对象.
在学习C/OC/Java/Python等编程语言的时候, 都可以按照这种方式去创建类和对象.JavaScript的面向对象…一. JavaScript的对象
传统的面向对象 面向对象语言的一个标志就是类类是所有对象的统称, 是更高意义上的一种抽象. 对象是类的实例.通过类我们可以创建任意多个具体的对象.
在学习C/OC/Java/Python等编程语言的时候, 都可以按照这种方式去创建类和对象.JavaScript的面向对象JavaScript中没有类的概念ES6之前
因此我们通常称为基于对象而不是面向对象.虽然JavaScript中的基于对象也可以实现类似于类的封装、继承、甚至是多态。 但是和传统意义的面向对象还是稍微有一些差异(后面我们会讲解它是如何实现的)ECMA中定义对象是这样: 无序属性的集合, 属性可以包含基本值, 对象或者函数.
也就是对象是一组没有顺序的值组成的集合而已.对象的每个属性或者方法都有一个名字, 而名字对应一个值. 有没有觉得非常熟悉?
没错, 其实就是我们经常看到和使用的映射(或者有些语言称为字典, 通常会使用哈希表来实现).
1.2. 简单的方式创建对象
创建自定义对象最简单的方式就是创建一个Object实例, 然后添加属性和方法
// 1.创建person的对象
var person new Object()
// 2.给person对象赋值了一些动态的属性和方法person.name wulin
person.age 21
person.height 1.8
person.sayHello function () { alert(Hello, My name is this.name)
}
// 3.调用方法, 查看结果person.sayHello()代码解析:
步骤一: 创建一个名为person的对象. 步骤二: 给对象动态的赋值了一些属性包括一个方法 步骤三: 调用sayHello()方法, 主要看一下this.name会获取到谁呢? wulin
插播一个信息: 函数和方法的关系
很多人在学习编程的时候, 会分不清楚什么是函数, 什么又是方法. 或者在什么情景下称为函数, 什么情景下称为方法.
首先, 如果你看的是英文文档, 会有明显的区分: Function被称为函数, Method被称为方法. 但是英文中, 为什么需要有这两个称呼呢?
在早期的编程语言中, 只有函数(类似于数学中函数的称呼)
后来有了面向对象语言, 面向对象语言中, 类中也可以定义函数. 但是人们为了区分在类中定义的函数, 通常称类中的函数为方法.
还有一个非常重要的原因是, 通常方法中会携带一个调用者的当前对象(会将调用者作为参数一起传递进去), 也就是说this(有些语言中是self. 比如OC/Swift/Python等) 当然, 你从这个角度来说, JavaScript中就没有函数了, 因为函数中都有this这样的参数. 但是通常来说, 我们还是会将封装到类中的函数称为方法, 而全局定义的函数称为函数.
如果接触过Java的同学可能会知道Java中只有方法的程序, 没有函数的称呼.
学习过C语言的同学可能知道, C语言中只有函数的称呼, 没有方法的称呼. 这就是因为Java中通常不定义全局函数, 但是在类中定义的. 而C语言不支持面向对象的编程.
对象字面量称为创建这种对象的首选方式
// 1.创建对象的字面量
var person { name: wulin, age: 21, height: 1.8, sayHello: function () { alert(My name is this.name) }}
// 2.调用对象的方法person.sayHello()1.3. JavaScript中属性的特性
根据特性的不同可以把属性分成两种类型数据属性和访问器属性。
[[Configurable]] // true or false
表示能否通过delete删除属性从而重新定义属性能否修改属性的特性或者能否把属性修改为访问器属性。 像前面例子中那样直接在对象上定义的属性它们的这个特性默认值为true。
[[Writable]] // true or false
表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性它们的这个特性默认值为true。
[[Enumerable]] // true or false表示能否通过for-in循环返回属性。像前面例子中那样直接在对象上定义的属性它们的这个特性默认值为true。
[[Value]] // everty thing包含这个属性的数据值。读取属性值的时候从这个位置读写入属性值的时候把新值保存在这个位置。这个特性的默认值为undefined。
[[set]] // function or undefined在写入属性时调用的函数。默认值为undefined。
[[get]] // function or undefined在读取属性时调用的函数。默认值为undefined。这些属性特性是什么东西呢?
从上面, 我们对这些特定的解释, 你会发现, 每个特定都会有自己特定的用途. 比如Configurable当我们配置为false时, 就无法使用delete来删除该属性.
设置属性特定obj: 将要被添加属性或修改属性的对象prop: 对象的属性descriptor: 对象属性的特性要想修改属性的特性必须通过两个Object方法
即Object.defineProperty和Object.defineProperties正如其字面意思这两个方法都是用来定义修改属性的前者一次只能定义一个属性后者则可以多个。
var person {}
Object.defineProperty(person, birth, { writable: false,
value: 2000}
)
alert(person.birth) // 2000
person.birth 1999alert(person.birth) // 2000数据属性:
数据属性包含一个数值的位置在这个位置可以读取和写入值。 数据属性拥有4个特性: [[Configurable]]/[[Enumerable]]/[[Writable]]/[[Value]]
按照上面的方式, 我们定义的属性就是数据属性 访问器属性:
访问器属性不包含数据值它们包含一对getter和setter函数。 访问器属性不能直接定义需要使用后面提到的Object.defineProperty函数定义。 访问器属性也拥有4个特性:
[[Configurable]]/[[Enumerable]]/[[Get]]/[[Set]] 定义一个访问器属性:
二. JavaScript创建对象
2.1. 使用工厂模式
工厂模式是一种非常常见的设计模式, 这种模式抽象了创建具体对象的过程.因为JavaScript中没法创建类, 开发人员就发明了一种函数, 用函数来封装以特定接口创建对象的细节. 下面展示一些 内联代码片。
// 创建工厂函数
function createPerson(name, age, height) { var o new Object()
o.name name
o.age age o.height height o.sayHello function () { alert(Hello, My name is this.name) } return o}// 创建两个对象var person1 createPerson(wulin, 21, 1.8)var person2 createPerson(wulin2,21, 1.8)person1.sayHello() // Hello, My name is wulinperson2.sayHello() // Hello, My name is wulin22.2. 构造函数模式
JavaScript中的构造函数可用来创建特定类型的对象。
像Object和Array这样的原生构造函数在运行时会自动出现在执行环境中。 此外也可以创建自定义的构造函数从而定义自定义对象类型的属性和方法。 使用构造函数模式创建对象:
// 构造函数
function Person(name, age, height) { this.name name
this.age age
this.height height
this.sayHello function () { alert(this.name) }}
// 使用构造函数创建对象
var person1 new Person(wulin, 21, 1.8)
var person2 new Person(wulin2, 21, 1.8)
person1.sayHello()
// wulinperson2.sayHello()
// wulin2在这个例子中Person()函数取代了createPerson()函数。
我们会发现这个函数有一些不太一样的地方:
没有显式地创建对象(比如创建一个Object对象) 直接将属性和方法赋给了this对象 没有return语句 另外, 我们还注意到函数名Person使用的是大写字母P。
按照惯例构造函数始终都应该以一个大写字母开头而非构造函数则应该以一个小写字母开头 这个做法借鉴自其他面向对象语言主要是为了区别于ECMAScript中的其他函数 因为构造函数本身也是函数只不过可以用来创建对象而已 还有, 我们在调用函数时, 不再只是简单的函数(), 而是使用了new关键字
这种方式调用构造函数实际上会经历以下4个步骤
创建一个新对象, 这个新的对象类型其实就是Person类型. 将构造函数的作用域赋给新对象因此this就指向了这个新对象也就是this绑定 执行构造函数中的代码为这个新对象添加属性和方法 返回新对象, 但是是默认返回的, 不需要使用return语句
我们也可以通过instanceof来查看它的类型 注意: 我们会发现person1和person2既是Person类型, 也是Object类型.这是因为默认所有的对象都继承自Object.
// 使用instanceof查看是否是person或者Object类型
alert(person1 instanceof Object) // true
alert(person1 instanceof Person) // true
alert(person2 instanceof Object) // true
alert(person2 instanceof Person) // true2.3. 关于构造函数
关于构造函数
我们知道, 构造函数也是一个函数, 只是使用的方式和别的函数不太一样.(使用new) 但是, 构造函数毕竟也是函数, 因此也可以像普通的函数一样去使用. 而且, 其他任何的函数, 也可以通过new关键字来调用, 这个时候这个函数也可以被称为构造函数. 把构造函数当做普通的函数去调用
// 当做构造函数使用
var person new Person(wulin, 21, 1.8) // person对象
person.sayHello()// 作为普通的函数调用Person(wulin2, 21, 1.8)
// window对象
window.sayHello()
// 在另外一个对象的作用域调用
var o new Object()Person.call(o, wulin, 21, 1.8)// o对象o.sayHello()构造函数来创建对象的缺陷:
构造函数模式虽然好用但也并非没有缺点。 使用构造函数的主要问题就是每个方法都要在每个实例上重新创建一遍。 在前面的例子中personl和person2都有一个名为sayName()的方法但那两个方法不是同一个Function的实例。 JavaScript中的函数也是对象因此每定义一个函数也就是实例化了一个对象
