JavaScript的面向对象
JavaScript其实支持多种编程范式的,包括函数式编程和面向对象编程。
JavaScript中的对象被设计成一组属性的无序集合,像是一个哈希表,有key和value组成key是一个标识符名称, value可以是任意类型,也可以是其他对象或者函数类型
如果值是一个函数,那么我们可以称之为是对象的方法
JavaScript创建对象的两种方式
1.早期使用创建对象的方式最多的是使用Object类,并且使用new关键字来创建一个对象:
这是因为早期很多JavaScript开发者是从Java过来的,它们也更习惯于Java中通过new的方式创建一个对象
// 1.创建方式一: 通过new Object()创建
var obj = new Object()
obj.name = "why"
obj.age = 18
obj.height = 1.88
obj.running = fucntion() {
console.log(this.name + "在跑步~")
}
2.后来很多开发者为了方便起见,都是直接通过字面量的形式来创建对象
这种形式看起来更加的简洁,并且对象和属性之间的内聚性也更强,所以这种方式后来就流行了起来
// 2.创建方式二: 字面量形式
var info = {
name:"kebe",
age:40,
height:1.98
eating: function(){
console.log(this.name + "在吃东西")
}
}
字面量形式其实是第一种方式的语法糖,其执行的时候也是通过new Object()的形式创建的。
JavaScript 对属性操作的控制
基本操作
获取属性
var obj = {
name: "why",
age: 18
}
console.log(obj.name)
给属性赋值
var obj = {
name: "why",
age: 18
}
console.log(obj.name)
删除属性
var obj = {
name: "why",
age: 18
}
delete obj.name
console.log(obj)
遍历属性
for (var key in obj) {
console.log(key)
}
对属性操作的控制
在前面我们的属性都是直接定义在对象内部,或者直接添加到对象内部的
但是这样来做的时候我们就不能对这个属性进行一些限制:比如这个属性是否是可以通过delete删除的?这个属性是否在for-in遍历的时候被遍历出来呢?
如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。 (1)通过属性描述符可以精准的添加或修改对象的属性 (2)属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(obj,prop,descriptor)
1.参数
Object.defineProperty()可接收三个参数:
(1)obj要定义属性的对象;
(2)prop要定义或修改的属性的名称或 Symbol
(3)descriptor要定义或修改的属性描述符
2.返回值
被传递给函数的对象。
3.分类
属性描述符的类型有两种:
(1)数据属性(Data Properties)描述符(Descriptor);
(2)存取属性(Accessor访问器 Properties)描述符(Descriptor)
数据属性描述符
数据数据描述符有如下四个特性\
[[Configurable]]:表示属性是否可以使用delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性描述符;
当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;
[[Writable]]:表示是否可以修改属性的值;
当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false;
[[value]]:属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改;
默认情况下这个值是undefined;
数据属性描述符举例
//name 和age 虽然没有使用属性描述符来定义,但是她们也是具备对应的特性的
//value:赋值的value
//configurable:true
//enmerable:true
//writable:true
var obj = {
name: "why"
age:18
}
//数据属性描述符
//用了属性描述副,那么会有默认的特性
Object.defineProperty(obj,"address",{
value:"北京市", // 如不设置,默认值为undefined
//该属性不可删除/也不可以重新定义属性描述符
configurable:false, // 默认值为false
//配置是否可以对(address)属性进行枚举
enumerable:true,//默认值为false
//配置是否可以赋值(写入值)
writable:false //默认值为false
})
存取属性描述符
数据数据描述符有如下四个特性:\
[[Configurable]]:表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性 描述符;
和数据属性描述符是一致的;
当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
[[Enumerable]]:表示属性是否可以通过for-in或者Object.keys()返回该属性;
和数据属性描述符是一致的;
当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;\
[[get]]:获取属性时会执行的函数。默认为undefined\
[[set]]:设置属性时会执行的函数。默认为undefined
存储属性举例
var obj = {
name: "why",
age: 18,
_address: "北京市" // 隐藏的属性一般以下划线开头
}
var obj = {
name: "why",
age: 18,
_address: "北京市"
}
//1.当我们希望隐藏某一个私有属性,希望直接被外界使用和赋值时,可以使用存储属性描述符
//2.如果我们希望截获某一个属性的访问和设置的过程,也会使用存储属性描述符
Object.defineProperty(obj,"address",{
enumerable:true,
configurable:true,
get:function(){
foo()
return this._address
},
set:function(value) {
bar()
this._address = value
}
})
obj.address = "上海市"
obj.address = "上海市"
console.log(obj.address)
function foo() {
console.log("获取了一次address的值")
}
function bar() {
console.log("设置了addres的值")
}
//获取了一次address的值
//北京市
//设置了addres的值
//获取了一次address的值
//上海市
同时定义多个属性
Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性,并且返回该对象。
var obj = {
// 私有属性(js里面是没有严格意义的私有属性)
_age: 18,
_eating: function() {},
set age(value) {
this._age = value
},
get age() {
return this._age
}
}
Object.defineProperties(obj,{
name:{
configurable:true,
enumerable:true,
writable:true,
value:"why"
},
age:{
configurable:true,
enumerable:true,
get:function(){
return this._age
},
set: function(value){
_this._age = value
}
}
})
obj.age = 19
console.log(obj.age)
console.log(obj)
// 19
/*{
_age: 19,
_eating: [Function: _eating],
age: [Getter/Setter],
name: 'why'
}*/
其他对象方法
获取对象的属性描述符:
getOwnPropertyDescriptor
getOwnPropertyDescriptors\
禁止对象扩展新属性:preventExtensions
给一个对象添加新的属性会失败(在严格模式下会报错);
密封对象,不允许配置和删除属性:seal
实际是调用preventExtensions
并且将现有属性的configurable:false
冻结对象,不允许修改现有属性: freeze
实际上是调用seal
并且将现有属性的writable: false
var obj = {
// 私有属性(js里面是没有严格意义的私有属性)
_age: 18,
_eating: function() {}
}
Object.defineProperties(obj, {
name: {
configurable: true,
enumerable: true,
writable: true,
value: "why"
},
age: {
configurable: true,
enumerable: true,
get: function() {
return this._age
},
set: function(value) {
this._age = value
}
}
})
// 获取某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name")) //{ value: 'why', writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj, "age"))//{
get: [Function: get],
set: [Function: set],
enumerable: true,
configurable: true
}
// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))/*
{
_age: { value: 18, writable: true, enumerable: true, configurable: true },
_eating: {
value: [Function: _eating],
writable: true,
enumerable: true,
configurable: true
},
name: {
value: 'why',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get],
set: [Function: set],
enumerable: true,
configurable: true
}
}
*/
var obj = {
name: 'why',
age: 18
}
// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)
obj.height = 1.88
obj.address = "广州市"
console.log(obj) //{ name: 'why', age: 18 }
// 2.禁止对象配置/删除里面的属性
Object.seal(obj)
delete obj.name
console.log(obj.name)//why
// 3.让属性不可以修改(writable: false)
Object.freeze(obj)
obj.name = "kobe"
console.log(obj.name)//why