JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链

相关链接：

JS面向对象（1） -- 简介，入门，系统常用类，自定义类，constructor，typeof，instanceof，对象在内存中的表现形式

JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链

JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

1.this的使用

核心：在js中，this表示当前对象，“谁”调用了当前函数，“this”就指向了“谁”

语法：

Function 类(){

this.属性=值;

}

例1.在构造器中，使用this为当前对象添加属性

1 function Person(){
2     this.name = 'zhangsan';
3     this.age = 30;
4 }
5 var p1 = new Person();
6 var p2 = new Person();
7 
8 alert(p1.name + p1.age);
9 alert(p2.name + p2.age);

创建的这两个对象，它们的属性是一样的，但值也是相同的。

例2.使用this为构造函数传参

1 function Person(p_name,p_age){
2     this.name = p_name;
3     this.age = p_age;
4 }
5 var p1 = new Person('zhangsan',30);
6 var p2 = new Person('lisi',20);
7 
8 alert(p1.name + p1.age);
9 alert(p2.name + p2.age);

在构造器中定义形参，实例化对象时，通过构造函数传参传递数据。

关于this的深入理解：函数是由对象调起来的，在函数中的this就指向了这个对象。所有函数都是面向对象调用，普通函数的调用是由window对象调用的。

 

2.对象之间的赋值

对象之间的赋值都是按地址进行传递的。

第一种：将对象作为参数传递

1 function Person(p_name,p_age){
2     this.name = p_name;
3     this.age = p_age;
4 }
5 function display(obj){
6     alert(obj.name + obj.age);
7 }
8 var p1 = new Person('zhangsan',30);
9 display(p1);

第二种：将对象作为返回值返回（好处：返回多个值）

 1 function Person(p_name,p_age){
 2     this.name = p_name;
 3     this.age = p_age;
 4 }
 5 function display(){
 6     var p1 = new Person('zhangsan',30);
 7     return p1;
 8 }
 9 var per=display();
10 alert(per.name+per.age);

 

3.for...in语句

解决问题：我们在程序中，接受参数或返回值之后，我们通过for...in语句遍历取得当前对象的所有属性

1 function Person(p_name,p_age,p_email){
2     this.name = p_name;
3     this.age = p_age;
4     this.email = p_email;
5 }
6 var p1 = new Person('zhangsan',30,'[email protected]');
7 for (var i in p1){
8     document.write(i + ':' + p1[i] + '<br>');
9 }

结果：name:zhangsan  age:30  email:[email protected]

for...in语句不仅可以遍历自定义对象，也可以遍历系统对象。

 

4.delete的使用

delete的主要功能：删除属性

比如说，程序中有一个对象，我们在对其进行取值之后，如果不想保留这个对象中的某个属性，可以使用delete将其清除

 1 function Person(p_name,p_age,p_email){
 2     this.name = p_name;
 3     this.age = p_age;
 4     this.email = p_email;
 5 }
 6 var p1 = new Person('zhangsan',30,'[email protected]');
 7 delete p1.name;
 8 for (var i in p1){
 9     document.write(i + ':' + p1[i] + '<br>');
10 }

结果：age:30  email:[email protected]

注意：delete只能删除自定义对象属性，不能删除系统对象的属性。

 

5.成员方法

例如：在实例化对象的同时，让其自动拥有某些方法

 1 function Person(p_name,p_age){
 2     this.name = p_name;
 3     this.age = p_age;
 4     this.say=function(){
 5         alert(this.name + this.age);
 6     }
 7 }
 8 var p1 = new Person('zhangsan',30);
 9 var p2 = new Person('lisi',20);
10 p1.say();
11 p2.say();

关于成员方法在内存中的表现形式：用p1来举例，p1和p1指向堆内存的地址保存在栈内存当中；堆内存当中，保存着[name:zhangsan]和[age:30]以及[say:指向代码段的地址]；代码段中保存着say的function(){...}。

 

6.json对象的使用

背景：首先js中的对象是指属性的无需集合（一个对象是有若干个属性构成的），所谓“集合”是指“名/值”对的集合（js中，可以使用{}来表示这个集合）。

语法：json对象{属性名：属性值，属性名：属性值，属性名：属性值......}

1 //定义一个json对象
2 var p1 = {name:'zhangsan',age:30,email:'[email protected]'};
3 var p2 = {'name':'zhangsan','age':30,'email':'[email protected]'};
4 var p3 = {"name":'zhangsan',"age":30,"email":'[email protected]'};
5 
6 //使用json对象
7 alert(p1.name+p1.age+p1.email);
8 alert(p2.name+p2.age+p2.email);
9 alert(p3.name+p3.age+p3.email);

定义json对象的属性时，可以使用三种格式：Name, 'Name', "Name"。json是Object类下的一个对象。

 1 //定义json数组来保存多个人的信息
 2 var per = [
 3     {name:'zhangsan',age:30,email:'[email protected]'},
 4     {'name':'zhangsan','age':30,'email':'[email protected]'},
 5     {"name":'zhangsan',"age":30,"email":'[email protected]'}
 6     ];
 7 
 8 //遍历json数组
 9 for (var i=0;i<per.length;i++){
10     document.write(per[i].name+':'+per[i].age+'<br>');
11 }

通过构造器得到一个对象与使用json来创建对象的特点：

使用json创建对象省略了构造器的定义，一般用与只需要一个对象

使用构造器可以简化属性的定义，需要多个相同属性或方法的对象

json的成员方法：为json对象添加一个属性，属性值是一个函数

1 var json = {name : 'zhangsan',say:function(){
2     alert(this.name);
3 }};
4 json.say();

php中处理json的方式：

生成json：String json_encode($obj|$row)

解析json：json_decode($jsonstr,$flag) [注： true：解析到数组中  false：解析到对象中  默认：false]

 

7.prototype的使用

功能：返回对象类原型的引用

格式：class.prototype

 1 //例1
 2 function Person(p_name){
 3     this.name = p_name;
 4 }
 5 var p2 = new Person('wangwu');
 6 Person.prototype.age = 30;
 7 Person.prototype.speak=function(){
 8     alert(this.name+this.age);
 9 }
10 var p1 = new Person('zhangsan');
11 p1.speak();
12 p2.speak();

在例1中，我们利用prototype为Person类下的所有对象添加一个叫age的属性和speak方法。注意的是，Person.prototype.age和Person.age是有区别的。Person.prototype.age是指为Person类下的实例添加age属性，而Person.age是指为Person类添加的静态属性。

原理：JS底层在加载Person构造器的时候，会生成一个与之对应的，完全独立的Person原型对象。 在Person构造器内有一个prototype的属性。在Person原型对象里面有一个constructor属性。Person构造器下的prototype指向Person原型对象，Person原型对象下的constructor指向Person构造器。

1 //例2
2 function Person(p_name){
3     this.name = p_name;
4 }
5 Person.prototype.age = 30;
6 var p1 = new Person('zhangsan');
7 p1.age=10;
8 alert(p1.age);
9 alert(p1.constructor.prototype.age);

结果：第一个弹出10，第二个弹出30。p1.age相当于为p1对象动态添加了一个叫age的属性。但没有改变Person原型对象中的值。

 

8.原型继承与原型链

所有类的父类都是Object类。

原型是一个对象，它是Object类下的一个实例。当系统为Person构造器创建原型对象时，JS会执行：Person.prototype = new Object();。所以Object类下的所有属性和方法会被这个原型对象所拥有。Person下的实例就可以通过这个原型对象使用这些属性和方法。这也是Object是所有类的父类的原因。

1 function Person(p_name){
2     this.name = p_name;
3 }
4 Object.prototype.age = 30;
5 Object.prototype.speak=function(){
6     alert(this.name+this.age);
7 }
8 var p1 = new Person('zhangsan');
9 p1.speak();

原型链的举例：Person原型对象也是对象，当这个对象找不到某个属性时，会找到Object构造器的原型对象中去找，这个就是原型链。