JavaScript对象详解,深入理解js对象
定义:对象是JavaScript的基本数据类型。对象也是一种复合值:可以通过名字访问这些值,我们可以将对象看做是从字符串到值的映射,当然对象不仅仅是字符串到值的映射,除了自有的属性还可以从原型继承属性。创建对象:1.字面量方式var empty={} //创建一个空对象var obj={a:1,b:2};//两个属性的对象var compObj={a:'1',b:'2',cc:{d:'3',e:'
定义:
对象是JavaScript的基本数据类型。对象也是一种复合值:可以通过名字访问这些值,我们可以将对象看做是从字符串到值的映射,当然对象不仅仅是字符串到值的映射,除了自有的属性还可以从原型继承属性。
创建对象:
1.字面量方式
var empty={} //创建一个空对象
var obj={a:1,b:2}; //两个属性的对象
var compObj={a:'1',b:'2',cc:{
d:'3',
e:'4'
}
}; //复杂的对象
2.new构造函数的方式创建对象
var a = new Array();//创建一个空数组
var d = new Date();//创建当前时间的Date对象
3.原型对象方式
function Person(name){
this.name=name;
}
Person.prototype.eat=function(){
console.log(this.name+"是个好人");
}
var zhangsan =new Person("张三");
4.Object.create()
var o1=Object.create({a:1,b:2});//o1会继承属性 a和b
属性的查询和设置
可以通过点(.)和方括号([])来获取属性的值
var o1={
a:1,
b:2,
'hello zhangsan':'张三'
}
o1.a //1
o1.b //2
o1['a']//1
o1['b']//2
var key='hello zhangsan';
o1[key]//张三
o1.key//undefined
o1.hello zhangsan //报错
可以看出对于点 (.) 来说,右侧必须是一个以属性名称命名的简单标示符。对于方括号来说,方括号内是一个计算结果为字符串的表达式,而这个字符串就是属性的名字,比如:
属性名'hello zhangsan',因为中间有空格只能用‘方括号‘的方式来获取,而其他属性则既可以 点 也可以 方括号。
设置值也是一样的,只不过有个赋值操作:
o1.a='3'
o1['b']='4'
删除属性
delete o1.a;
delete o1['b']
注意:delete运算符只能删除自有属性,不能删除继承属性。
检测属性
1.in运算符
'a' in o1;//true
'b' in o1;//true
'toString' in o1//true o继承来的属性,打开控制台可以在o1对象的__proto__属性里面找到toString
2.hasOwnPreperty()方式
o1.hasOwnProperty('a');//true
o1.hasOwnProperty('b');//true
o1.hasOwnProperty('toString');//false 继承来的属性为false
3.使用 !==undefined
o1.a!==undefined//true
o1.b!==undefined//true
o1.toString!==undefined// 继承来的属性为true
当然如果值直接设置了undefined,则这种检测不起作用,比如 var o1={a:undefined} ,这个a属性就没办法这样检测了。
属性的枚举
1.for/in方式
for(key in o1){
console.log(key,'===',o1[key])
}
2.Object.keys 方式
var keys = Object.keys(o1);
keys.forEach((key)=>{
console.log(key,'===',o1[key])
})
原型属性
1.对象的__proto__均指向自身构造函数的prototype。
2.prototype中的constructor 属性指向构造函数本身。
3.isPrototypeOf方法检测对象自身是否处于另一个对象的原型或者处于原型链上。
对象的方法
对象从原型对象继承的基本是方法,看看几个比较重要的
1.valueOf() 方法返回指定对象的原始值。
//Array:返回数组对象本身
var array = [1,3,4,6];
console.log(array.valueOf() === array); // true
// Number:返回数字值
var num = 123213;
console.log(num.valueOf()); // 15.2654
// boolean:返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool); // true
2.toString() 方法返回一个表示该对象的字符串。
可以通过这个方法来检测对象的类型,如下代码
var toString = Object.prototype.toString;
console.log(toString.call(new Object()));//[object Object]
console.log(toString.call(new Date())); // [object Date]
console.log(toString.call('abc')); // [object String]
console.log(toString.call(123)); // [object Number]
console.log(toString.call(true)); // [object Boolean]
console.log(toString.call(undefined)); // [object Undefined]
console.log(toString.call(null)); // [object Null]
console.log(toString.call(/./));//[object RegExp]
3.toLocaleString() 方法返回一个该对象的字符串表示。
var toString = Object.prototype.toLocaleString;
console.log(toString.call(new Object()));//[object Object]
console.log(toString.call(new Date())); // Wed Dec 23 2020 20:09:24 GMT+0800 (中国标准时间)
console.log(toString.call('abc')); // abc
console.log(toString.call(123)); // 123
console.log(toString.call(true)); // true
console.log(toString.call(/./));// /./
4.hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性。
var o1={
a:1,
b:2,
'hello zhangsan':'张三'
}
console.log(o1.hasOwnProperty('a'));//true
console.log(o1.hasOwnProperty('b'));//true
console.log(o1.hasOwnProperty('toString'));//false 继承来的属性为false
5.propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。
//propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。
var o1={
a:1,
b:2,
'hello zhangsan':'张三'
}
console.log(o1.propertyIsEnumerable('a'));//true
console.log(o1.propertyIsEnumerable('b'));//true
console.log(o1.propertyIsEnumerable('toString'));//false 继承来的属性为false
6.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。
function Person(){}
function Man(){}
Man.prototype = Object.create(Person.prototype);
var m = new Man();
console.log(Person.prototype.isPrototypeOf(m)); // true
console.log(Object.prototype.isPrototypeOf(m)); // true
从下图我们也可以看到 m 实例对象的__proto__指向了Person.prototype对象,同时Person.prototype对象的__proto__属性指向了Object.prototype对象。
整理不易给个三连支持一下吧,谢谢!
更多推荐
所有评论(0)