1. 对象
JavaScript 中的对象,和其它编程语言中的对象一样,可以比照现实生活中的对象来理解它。 JavaScript 中对象的概念可以比照着现实生活中实实在在的物体来理解。
在 JavaScript 中,一个对象可以是一个单独的拥有属性和类型的实体。拿它和一个杯子做下类比,一个杯子是一个对象,拥有属性。杯子有颜色、图案、重量等等。同样, JavaScript 对象也有属性来定义它的特征。
方法 是关联到某个对象的函数,或者简单地说,一个方法是一个值为某个函数的对象属性。定义方法就象定义普通的函数,除了它们必须被赋给对象的某个属性。
1.1 对象分类
-
内置对象/原生对象
就是 JavaScript 语言预定义的对象。在 ECMAScript 标准定义,由 JavaScript 解释器/引擎提供具体实现。(String\Number)
-
宿主对象
指的是 JavaScript 运行环境提供的对象。一般是由浏览器厂商提供实现(目前也有独立的 JavaScript 解释器/引擎提供实现),主要分为 BOM 和 DOM。
-
自定义对象
就是由开发人员自主创建的对象。
2.1 对象初始化器方式
使用对象初始化器也被称作通过字面值创建对象。通过对象初始化器创建对象的语法如下:
var 对象名 = {
属性名 : 属性值,
方法名 : function(){
方法体
}
}
var hero1 = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
2.2 构造函数方式
- 通过 JavaScript 提供的预定义类型的构造函数来创建对象,如下示例:
var date = new Date();// 创建一个 Date 对象
var str = new String("this is string.");// 创建一个 String 对象
var num = new Number(100);// 创建一个 Number 对象
- 通过 JavaScript 提供的 Object 类型的构造函数来创建自定义对象,如下示例:
var obj = new Object();// 创建一个自定义对象
*new - 关键字,表示创建一个新的对象
* Object - 在JavaScript中是对象的祖先
为该对象设置属性和方法
* 设置属性 - 对象名.属性名 = 属性值;
* 设置方法 - 对象名.方法名 = function(){}
var hero2 = new Object();
hero2.name = 'zhouzhiruo';
hero2.sayMe = function(){
console.log('this is zhouzhiruo.');
}
2.3 Object.create() 方法
Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法如下:
Object.create(proto, [ propertiesObject ])
参数:
- proto 参数: 一个对象,作为新创建对象的原型。
- propertiesObject 参数: 可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符。
通过 Object.create() 方法创建一个新对象,同时扩展自有属性。
3. 对象的属性
一个 JavaScript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 JavaScript 变量基本没什么区别,仅仅是属性属于某个对象。
3.1 定义对象的属性
一个 JavaScript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 JavaScript 变量基本没什么区别,仅仅是属性属于某个对象。
var hero = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
- 可以通过点符号来创建一个对象的属性。
/*
TODO 新增属性或方法
TODO * 对象名.新的属性名 = 属性值;
TODO * 对象名.新的方法名 = function(){}
*/
hero.job = 'jiaozhu';
hero.sayJob = function(){
console.log('my job is jiaozhu.');
}
- JavaScript 对象的属性也可以通过方括号创建。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
var myCar = new Object();
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;
/*
TODO 修改属性或方法
TODO * 对象名.原有属性名 = 新的属性值;
TODO * 对象名.原有方法名 = function(){}
*/
hero.name = 'zhouzhiruo';
hero.sayMe = function(){
console.log('this is zhouzhiruo.');
}
3.2 访问对象的属性
- 可以通过点符号来访问一个对象的属性。 对象名.属性名 ;对象名.方法名()
let hero1 = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
console.log(hero1.name);
var emp = { ename : 'Tom', salary : 3500 };
emp.ename = 'Tommy';// 修改属性的值
console.log(emp.ename);// 获取属性的值
- JavaScript 对象的属性也可以通过方括号访问。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
var hero = {
name : 'zhangwuji',
age : 18,
// TODO 定义的属性或方法名 - 必须定义为字符串类型
'content-type' : 'text/html',
sayMe : function(){
console.log('this is zhangwuji.');
}
}
/*
TODO 对象的属性和方法具有一种通用的调用方式
TODO * 属性 -> 对象名['属性名']
TODO * 方法 -> 对象名['方法名']()
*/
console.log(hero['name']);
hero['sayMe']();
// TODO 适用于属性名或方法名命名方式比较复杂的
console.log(hero['content-type']);
3.3 删除对象的属性
var hero = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
/*
TODO 删除操作使用一个 delete 关键字
TODO * delete 对象名.属性名
TODO * delete 对象名.方法名
*/
delete hero.name;
delete hero.sayMe;
3.4 属性访问出错
<script>
let hero = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
// todo 调用不存在的属性
console.log(hero.sex);// undefined
// todo 调用不存在的方法
console.log(hero.ha());// Uncaught TypeError: hero.ha is not a function
</script>
3.5遍历(枚举)属性
let hero = {
name : 'zhangwuji',
age : 18,
sayMe : function(){
console.log('this is zhangwuji.');
}
}
- for…in 循环: 该方法依次访问一个对象及其原型链中所有可枚举的属性。
语法结构:
for(var name in 对象名 ){
name代表了对象的属性名或方法名
}
<script>
let hero = {
name : 'libufan',
age : 18,
sayMe : function(){
console.log('laallaall');
}
}
console.log(typeof hero['sayMe']);// 输出:function
for(let pro in hero){
//得到属性名或方法名
// 区分属性或方法 用 typeof
if(typeof hero[pro] == "function"){
console.log(1)
hero[name]();
} else {
console.log( hero[pro]);
}
}
</script>
3.6 检测对象的属性
可以使用如下四种方法检测对象中是否存在指定属性:
- 使用 in 关键字。// 掌握
<script>
let hero = {
name : 'libufan',
age : 18,
sayMe : function(){
console.log('laallaall');
}
}
console.log('name' in hero);// 输出 :true
</script>
- 使用 Object 对象的 hasOwnProperty() 方法。
console.log( hero.hasOwnProperty( 'ename' ));
- 使用 undefined 进行判断。
console.log( hero.ename === undefined );
- 使用 if 语句进行判断。
if( hero.ename ){
console.log( 'ename属性存在' );
}