JavaScript对象

1.1 对象的创建方式

• 对象字面量

var hero = {

name : ' 黄忠 ' ,

weapon : ' 弓箭 ' ,

equipment : [ ' 头盔 ' , ' 靴子 ' , ' 盔甲 ' ],

blood : 100 ,

attack : function () {

console . log ( this . name + ' ：射箭 ' );

},

run : function () {

console . log ( this . name + ': 加速跑 ' );

}

}

console . log ( hero . name );

console . log ( hero . equipment );

hero . attack ();

hero . run ();

• new Object()创建对象  

// Object 是一个构造函数

// new 的方式来调用构造函数

// new Object() 调用构造函数 会在内存中创建一个对象

var hero = new Object (); // 创建了一个空的对象

// 打印一个不存在的属性 输出 undefined

// console.log(hero.name);

// 属性

// JavaScript 的动态特性

hero . name = ' 关羽 ' ;

hero . weapon = ' 青龙偃月刀 ' ;

hero . equipment = [ ' 头盔 ' , ' 靴子 ' , ' 赤兔马 ' ];

hero . blood = 100 ;

// 方法

hero . attack = function () {

console . log ( this . name + ': 射箭 ' );

}

hero . run = function () {

console . log ( this . name + ': 加速跑 ' )

} 

• 工厂函数创建对象 

function createHero ( name , weapon , equipment , blood ) {

var hero = new Object (); // 返回一个空的对象

// 属性

hero . name = name ;

hero . weapon = weapon ;

hero . equipment = equipment ;

hero . blood = blood ;

// 方法

hero . attack = function () {

console . log ( this . name + ' ：攻击 ' );

}

hero . run = function () {

console . log ( this . name + ' ：加速跑 ' );

}

return hero ;

}

var hero1 = createHero ( ' 黄忠 ' , ' 弓箭 ' , [ ' 头盔 ' , ' 靴子 ' ], 100 );

var hero2 = createHero ( ' 刘备 ' , ' 剑 ' , [ ' 头盔 ' , ' 盔甲 ' ], 100 );

• 自定义构造函数 

function Hero ( name , weapon , equipment , blood ) {

// this 动态的给对象增加成员

// this 指向了当前对象

this . name = name ;

this . weapon = weapon ;

this . equipment = equipment ;

this . blood = blood ;

this . attack = function () {

console . log ( this . name + ' ：攻击 ' );

}

this . run = function () {

console . log ( this . name + ': 加速跑 ' );

}

}

var hero1 = new Hero ( ' 黄忠 ' , ' 弓箭 ' , [ ' 头盔 ' , ' 靴子 ' ], 100 );

var hero2 = new Hero ( ' 刘备 ' , ' 剑 ' , [ ' 头盔 ' , ' 盔甲 ' ], 100 );

this 代表的是当前对象 。

但是构造函数方有个缺点，就是对象的方法放在了构造函数内部，这样每创建一个方法就会需要多占用一些内存，所以js 给构造函数设计了一个 prototype 属性，用来存放对象的方法：

function Student ( name , age , id ){

this . name = name ;

this . age = age ;

this . id = id ;

}

Student . prototype = {

work : function ( skill ){

alert ( this . name + " 做 " + skill + " 开发相关的工作 " );

},

classId : "Java1 班 "

}

var stu1 = new Student ( " 李明 " , 18 , 20151515 ); // 得到的就是字面量对象

var stu2 = new Student ( " 王磊 " , 18 , 20141000 ); // 得到的就是字面量对象

console . log ( stu2 . work == stu1 . work ); //ture ，节省了内存空间

stu1 . work ( "Java" );

stu2 . work ( "PHP" );

console . log ( stu1 . classId ); //20151515

console . log ( stu2 . classId ); //20141000

1.2 属性和方法

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征。

如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的行为和功能。

1.3 关键字详解

new 关键字

构造函数 ，是一种特殊的函数。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new 运算符一起使用在创建对象的语句中。

1. 构造函数用于创建一类对象，首字母要大写。

2. 构造函数要和 new 一起使用才有意义。

// Student 自定义构造函数

// 属性： name age sex score

// 方法： sayHi

function Student ( name , age , sex , score ) {

// 属性

this . name = name ;

this . age = age ;

this . sex = sex ;

this . score = score ;

// 方法

this . sayHi = function () {

console . log ( this . name + ': hello' );

}

}

var stu1 = new Student ( 'lilei' , 18 , ' 男 ' , 100 );

var stu2 = new Student ( 'hanmeimei' , 17 , ' 女 ' , 100 );

new在执行时会做四件事情

• new会在内存中创建一个新的空对象
• new 会让this指向这个新的对象
• 执行构造函数 目的：给这个新对象加属性和方法
• new会返回这个新对象

this 详解

1. 函数在定义的时候 this 是不确定的，只有在调用的时候才可以确定

2. 一般函数直接执行，内部 this 指向全局 window

3. 函数作为一个对象的方法，被该对象所调用，那么 this 指向的是该对象

4. 构造函数中的 this 其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new 关键字来调用，从而实现实例化

1.4 对象的使用方法

对象属性的使用：

1 、可以用点符号访问对象属性值

2 、也可以通过数组的方式，即用 [" 属性名称 "]

对象方法的使用：

可以使用对象名 . 方法名 () 来调用

遍历对象的属性

通过 for..in 语法可以遍历一个对象

var obj = {

name : ' 张三 ' ,

age : 18 ,

sex : true ,

sayHi : function () {

console . log ( this . name );

}

};

for ( var key in obj ) {

console . log ( key + "==" + obj [ key ]);

}

 删除对象的属性

function fun () {

this . name = 'mm' ;

}

var obj = new fun ();

console . log ( obj . name ); // mm

delete obj . name ;

console . log ( obj . name ); // undefined