给女朋友做的网站源码,柳州城市的城乡建设管理局网站,微信小程序开发费用一览表,星月教你做网站原生JavaScript之对象、类与面向对象编程 理解对象属性类型数据属性访问器属性 定义多个属性读取属性特征合并对象对象标识及相等判定对象新语法属性值简写动态给属性命名 简写方法对象解构 小结 理解对象
定义#xff1a;对象为一组属性的无序集合#xff0c;严格来说… 原生JavaScript之对象、类与面向对象编程 理解对象属性类型数据属性访问器属性 定义多个属性读取属性特征合并对象对象标识及相等判定对象新语法属性值简写动态给属性命名 简写方法对象解构 小结 理解对象
定义对象为一组属性的无序集合严格来说对象就是一组没有特定顺序的值。它的每个属性或方法都由一个特定的名称来标识一个名称映射到一个值这个值可以是函数或数组也可以是普通的原始值。 使用对象字面量创建对象实例
let obj{name:Jack,age:18,eat(){console.log(Eating)}
}还可以使用new Object()创建对象这里就不赘述了上述就是对象的name、age就是对象的具体属性而eat则是一个方法。这个方法用于打印出Eating值。
属性类型
属性类型是指用于描述属性特征的内部属性一般用双重中括号进行标识不能用JavaScript进行显性调用出来了解这些只是为了更好的使用JavaScript开发。属性分两种数据属性和访问器属性。
数据属性
数据属性包含一个保存数据值的位置值会从这个位置读取和写入数据属性中有四个特性描述它们的行为。 [[configurable]]:属性是否可以通过delete删除是否可以修改成访问器属性是否可以修改它的特性默认都为true。 [[Enumerable]]:是否可以通过for-in遍历默认都为true。 [[Writable]]:属性值是否可以被修改默认都为true。 [[value]]:包含属性实际值这就是刚才提到的读取和写入数据的值默认值为undefined。 举例
let obj{name:Jack
}我们定义了一个属性name值为Jack而这个值就会放在[[value]]这个位置中无论这个值如何修改或删除都会放在[[value]]这个位置中。
如果想要修改属性的默认特征可以通过Object.defineProperty属性举例
let obj{}
Object.defineProperty(obj,name,{writable:false,value:Tom
})
console.log(obj.name);//Tom
obj.nameJack
console.log(obj.name);//Tom在上述代码中我们可以发现在defineProperty属性中定义name的内部特性writeable为false后name就不能被修改了在非严格模式下它不会报错只会忽略但是在严格模式下它会报错。而其他属性也是一样的。
访问器属性
访问器属性不包含数据值它们包含一个获取get和一个设置set函数这两个函数不是必需的这两个函数默认值为undefined。 get函数是在属性读取时候会默认调用set函数则是在写入属性时会默认调用。举例
let obj{name:Tom
}
Object.defineProperty(obj,newName,{get(){return this.namethis.name;},set(newValue){this.namenewValueTom}
})
console.log(obj.newName);//TomTom
obj.newNameJack
console.log(obj.newName);//JackTomJackTom上述代码中我们重构了set和get方法在get方法中我们令newName属性获取值等于两个name属性值而set更新方法中我们让name属性值等于修改后newName属性值。
定义多个属性
语法Object.defineProperties 如果想定义多个属性并且设置它们的数据特性和访问器属性时可以使用上述方法。
let obj{name:Tom}Object.defineProperties(obj,{age:{value:18},food:{value:coco happy},method:{get(){return age;},set(){agetmethod;}}})最终的值是不可修改、不可删除、不可使用for-in迭代器的。也就是说使用definedProperty或者definedProperties默认所有属性都为false而不是都为true。所以在慎用这两个属性。
读取属性特征
语法Object.getOwnPropertyDescriptor()
let obj{name:Tom
}
let descriptionObject.getOwnPropertyDescriptor(obj,name)
console.log(description.value);//Tom
console.log(description.configurable);//true
console.log(description.enumerable);//true
console.log(description.get);//undefined
console.log(description.set);//undefined
console.log(description.writable);//true这个方法传递一个对象则输出这个对象的所有属性的特性值传递一个对象加其中的一个属性名则输出该属性的特性值。
合并对象
Object.assign合并对象被合并对象 它只能实现一层深拷贝多层就变浅拷贝了深拷贝就是指复制对象中属性值发生改变原对象属性值不变浅拷贝就是说复制对象属性值发生改变原对象属性值也改变深浅就在于它俩是否在同一个内存空间中浅拷贝是把它的引用和内存空间都复制了而深拷贝是把它的引用复制到新对象的内存空间中。实现深拷贝可以通过序列化、反序列化和递归操作实现这里就不赘述了。
let obj{name:Tom,food:{drink:coco}
}
let newObjObject.assign({},obj)
newObj.nametom
newObj.food.drinkjojo
console.log(newObj.name,obj.name);//tom Tom
console.log(newObj.food.drink,obj.food.drink);//jojo jojo对象标识及相等判定
ES6新推出的用于相等判定方法Object.is(参数参数)返回的是true、false
console.log(Object.is(NaN, NaN)); // true对象新语法
ES6新增对象语法
属性值简写
let nametom
let obj{name
}动态给属性命名
let miniNamename
let obj{}
obj[miniName]Tom
console.log(obj.name);//Tom简写方法
ES6前需要用 匿名函数方式写对象方法方法名function(){},ES6中则简化成 方法名(){}
对象解构
ES6前
let person{name:1,name1:2,
}
let nameperson.name,name1person.name1;后
let {name:name,name1:name1}person小结
本章主要讲解红宝书第八章第一部分对象。包含对象内部特性和对象的一些新语法。
