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為當前對象添加屬性

function Person(){
    this.name = 'zhangsan';
    this.age = 30;
}
var p1 = new Person();
var p2 = new Person();

alert(p1.name + p1.age);
alert(p2.name + p2.age);

創建的這兩個對象，它們的屬性是一樣的，但值也是相同的。

例2.使用this為構造函數傳參

function Person(p_name,p_age){
    this.name = p_name;
    this.age = p_age;
}
var p1 = new Person('zhangsan',30);
var p2 = new Person('lisi',20);

alert(p1.name + p1.age);
alert(p2.name + p2.age);

在構造器中定義形參，實例化對象時，通過構造函數傳參傳遞數據。

關於this的深入理解：函數是由對象調起來的，在函數中的this就指向了這個對象。所有函數都是面向對象調用，普通函數的調用是由window對象調用的。

 

2.對象之間的賦值

對象之間的賦值都是按地址進行傳遞的。

第一種：將對象作為參數傳遞

function Person(p_name,p_age){
    this.name = p_name;
    this.age = p_age;
}
function display(obj){
    alert(obj.name + obj.age);
}
var p1 = new Person('zhangsan',30);
display(p1);

第二種：將對象作為返回值返回（好處：返回多個值）

function Person(p_name,p_age){
    this.name = p_name;
    this.age = p_age;
}
function display(){
    var p1 = new Person('zhangsan',30);
    return p1;
}
var per=display();
alert(per.name+per.age);

 

3.for...in語句

解決問題：我們在程序中，接受參數或返回值之后，我們通過for...in語句遍歷取得當前對象的所有屬性

function Person(p_name,p_age,p_email){
    this.name = p_name;
    this.age = p_age;
    this.email = p_email;
}
var p1 = new Person('zhangsan',30,'[e-mail]');
for (var i in p1){
    document.write(i + ':' + p1[i] + '<br>');
}

結果：name:zhangsan  age:30  email:[e-mail]

for...in語句不僅可以遍歷自定義對象，也可以遍歷系統對象。

 

4.delete的使用

delete的主要功能：刪除屬性

比如說，程序中有一個對象，我們在對其進行取值之后，如果不想保留這個對象中的某個屬性，可以使用delete將其清除

function Person(p_name,p_age,p_email){
    this.name = p_name;
    this.age = p_age;
    this.email = p_email;
}
var p1 = new Person('zhangsan',30,'[e-mail]');
delete p1.name;
for (var i in p1){
    document.write(i + ':' + p1[i] + '<br>');
}

結果：age:30  email:[e-mail]

注意：delete只能刪除自定義對象屬性，不能刪除系統對象的屬性。

 

5.成員方法

例如：在實例化對象的同時，讓其自動擁有某些方法

function Person(p_name,p_age){
    this.name = p_name;
    this.age = p_age;
    this.say=function(){
        alert(this.name + this.age);
    }
}
var p1 = new Person('zhangsan',30);
var p2 = new Person('lisi',20);
p1.say();
p2.say();

關於成員方法在內存中的表現形式：用p1來舉例，p1和p1指向堆內存的地址保存在棧內存當中；堆內存當中，保存着[name:zhangsan]和[age:30]以及[say:指向代碼段的地址]；代碼段中保存着say的function(){...}。

 

6.json對象的使用

背景：首先js中的對象是指屬性的無需集合（一個對象是有若干個屬性構成的），所謂“集合”是指“名/值”對的集合（js中，可以使用{}來表示這個集合）。

語法：json對象{屬性名：屬性值，屬性名：屬性值，屬性名：屬性值......}

//定義一個json對象
var p1 = {name:'zhangsan',age:30,email:'[e-mail]'};
var p2 = {'name':'zhangsan','age':30,'email':'[e-mail]'};
var p3 = {"name":'zhangsan',"age":30,"email":'[e-mail]'};

//使用json對象
alert(p1.name+p1.age+p1.email);
alert(p2.name+p2.age+p2.email);
alert(p3.name+p3.age+p3.email);

定義json對象的屬性時，可以使用三種格式：Name, 'Name', "Name"。json是Object類下的一個對象。

//定義json數組來保存多個人的信息
var per = [
    {name:'zhangsan',age:30,email:'[e-mail]'},
    {'name':'zhangsan','age':30,'email':'[e-mail]'},
    {"name":'zhangsan',"age":30,"email":'[e-mail]'}
    ];

//遍歷json數組
for (var i=0;i<per.length;i++){
    document.write(per[i].name+':'+per[i].age+'<br>');
}

通過構造器得到一個對象與使用json來創建對象的特點：

使用json創建對象省略了構造器的定義，一般用與只需要一個對象

使用構造器可以簡化屬性的定義，需要多個相同屬性或方法的對象

json的成員方法：為json對象添加一個屬性，屬性值是一個函數

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

php中處理json的方式：

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

解析json：json_decode($jsonstr,$flag) [注： true：解析到數組中  false：解析到對象中  默認：false]

 

7.prototype的使用

功能：返回對象類原型的引用

格式：class.prototype

//例1
function Person(p_name){
    this.name = p_name;
}
var p2 = new Person('wangwu');
Person.prototype.age = 30;
Person.prototype.speak=function(){
    alert(this.name+this.age);
}
var p1 = new Person('zhangsan');
p1.speak();
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構造器。

//例2
function Person(p_name){
    this.name = p_name;
}
Person.prototype.age = 30;
var p1 = new Person('zhangsan');
p1.age=10;
alert(p1.age);
alert(p1.constructor.prototype.age);

結果：第一個彈出10，第二個彈出30。p1.age相當於為p1對象動態添加了一個叫age的屬性。但沒有改變Person原型對象中的值。

 

8.原型繼承與原型鏈

所有類的父類都是Object類。

原型是一個對象，它是Object類下的一個實例。當系統為Person構造器創建原型對象時，JS會執行：Person.prototype = new Object();。所以Object類下的所有屬性和方法會被這個原型對象所擁有。Person下的實例就可以通過這個原型對象使用這些屬性和方法。這也是Object是所有類的父類的原因。

function Person(p_name){
    this.name = p_name;
}
Object.prototype.age = 30;
Object.prototype.speak=function(){
    alert(this.name+this.age);
}
var p1 = new Person('zhangsan');
p1.speak();

原型鏈的舉例：Person原型對象也是對象，當這個對象找不到某個屬性時，會找到Object構造器的原型對象中去找，這個就是原型鏈。