一张思维导图搞定JS对象

684 阅读1分钟

一、总结对象的属性、创建以及原型继承


1、hasOwnProperty()方法可以检测一个属性是会否存在于是实例中
function Person() {

}
Person.protoype.name = 'xiaoxing'
Person.protoype.age = 18

var person1 = new Person()

var person2 = new Person()
person1.name = 'liang'
console.log(person1.hasOwnProperty('name')) //true

console.log(person2.hasOwnProperty('name'))  //false
 

2、单独使用in操作符会在通过对象能否访问给定的属性时返回true, 无论属性时实例属性还是原型属性

function Person() {

}
Person.prototype.name = 'xiaoxing'
Person.prototype.age = 18

var person1 = new Person()
var person2 = new Person()
person1.name = 'xiaohua'
console.log('name' in person1) //true
console.log('name' in person2) //true

3、所以可以封装一个函数来判断某个属性是否是原型属性
function hasProtoType(object,name) {
	return !object.hasOwnProperty(name) && (name in object)
}

console.log(hasProtoType(person1,'name'))   //false
console.log(hasProtoType(person2,'name'))  //true

4、for...in,Object.keys(),object.getOwnPropertyNames区别
for...in 遍历原型和实例上的所有可枚举的属性
Object.keys()返回的是实例上的可枚举的属性
Object.getOwnPropertyNames()返回实例上所有的属性

function Person() {

}
Person.prototype.name = 'xiaoxing'
Person.prototype.age = 18

var person1 = new Person()
var person2 = new Person()

console.log(Object.keys(person1)) //['name','adress']

for(var pro in person1) {
	console.log(pro)  //name,adress,age
}

console.log(Object.getOwnPropertyNames(Person.prototype)) //[ 'constructor', 'name', 'age' ]