JavaScript学习笔记(九):对象
1 对象长啥样?
var person = {
name: "xiaowus",
height: 178
}
其中, "person" 是对象名,对象的访问和修改都要用到对象名
"name" 和 "height" 是属性名,"xiaowus" 和 "178" 是属性值
属性值的数据类型可以为原始值,也可以为对象,还可以为方法(function)
属性值跟在属性名后边,用冒号分隔。属性名和属性值共同组成了一个属性
属性与属性之间用逗号分隔
用 " { } " 将属性包裹起来,形成一个完整的对象
2 属性的增删改查
- 查询属性的值,即访问:
通过 对象名 + 点 "." + 属性名 进行访问
console.log(person.name); //输出"xiaowus"
console.log(person.height); //输出178
console.log(person,girlfriend); //输出undefined
当访问一个不存在的属性时,不会报错,会返回undefined
- 修改属性的值:
直接用访问的方式,然后给它重新赋值即可
person.name = "javascript";
person.height = 185;
console.log(person.name); //输出"javascript"
console.log(person.height); //输出185
- 增加属性:
直接用 "." ,后面接上新属性的名称,然后直接赋值即可
person.sex = "male";
person.job = "student"
console.log(person.sex); //输出"male"
console.log(person.job); //输出"student"
- 删除属性
使用系统关键字:delete,delete后面接对象和属性名
delete person.job;
console.log(person.job); //输出undefined
3 对象的创建
有两种方法:
- var obj = {} ,就是文章开头的那种方式
- 通过构造函数创建
- 系统自带的构造函数:
Object()
- 自定义构造函数
- 系统自带的构造函数:
系统自带的构造函数Object()
:
var obj = new Object();
obj.name = 'abc';
obj.sex = 'male';
上面的代码等价于:
var obj = {
name: 'abc',
sex: 'male'
}
下面是自定义构造函数的示例:
function Phone(color) {
this.color = color;
this.name = "Xiaomi 9"
this.price = 2400;
this.boot = function() {
console.log(this.name + "开机了");
}
}
var phone = new Phone('white');
phone.boot();
上面代码的运行结果为:"Xiaomi 9开机了"
在构造函数里面,可以通过 "this+属性名" 来直接定义属性
this指代的就是对象本身,如:
var obj = {
a : function(){
return this===obj;
}
}
console.log( obj.a() ); //输出结果为true
创建对象的时候,只需在构造函数前面加个new,通过new来执行构造函数,执行完就会返回一个以构造函数为模板的对象
4 构造函数内部原理
内部执行有三个步骤:
- 在函数体最前面隐式地加上一个空对象:this =
- 执行 this.xxx = xxx; (这里就是自定义属性部分)
- 隐式地返回this对象
代码示例:
function Person(name, age, sex) {
//隐式地生成一个空对象
//var this = { };
//下面就是自定义部分,给this对象添加属性
this.name = name;
this.age = age;
this.sex = sex;
//最后隐式地返回this对象
//return this;
}
var person = new Person('张三', 20, '男');
可以强制改变构造函数的返回值:
function Car(){
this.name = "玛莎拉蒂";
this.color = "black";
var obj = {
name: "五菱宏光",
color: "white";
}
return obj;
}
var car = new Car();
console.log(car.name); //输出:五菱宏光
当给构造函数加上一个返回值,且这个返回值是另一个对象时,使用该构造函数创建对象得到的是返回值里的对象
就如上面的代码一样,本来是要返回一个 '玛莎拉蒂' 的Car对象,结果返回了一个 '五菱宏光' 的Car对象
但如果给构造函数加上的返回值是一个原始值,则创建对象时会忽略这个返回值
function Car(){
this.name = "玛莎拉蒂";
this.color = "black";
return 123; //这个返回值汇报系统忽略,相当于没执行
}
var car = new Car();
console.log(car.name); //输出:玛莎拉蒂