1. 程式人生 > 其它 >JavaScript中的物件和原型物件

JavaScript中的物件和原型物件

一.物件:是現實世界中客觀存在的事務,也可以說萬物皆物件

1.JavaScript中建立物件的方式一

語法:var 物件名=new Object();

程式碼如下:
//js面向物件
    //建立物件的方式1:
    var person=new Object();
    //給物件屬性賦值
    person.name="王二";
    person.age=18;

2.JavaScript中建立物件的方式二

語法:var 物件名={屬性1:屬性值1,屬性2:屬性值2....屬性n:屬性值};

程式碼如下:
//建立物件的方式2:
    var person1={name:"張三",age:18
}; console.log(person1.name)

3.JavaScript中建立物件的方式二:

使用構造方法建立物件
語法:首先定義一個物件的建構函式
function 函式名(屬性1,屬性2...)
{
this.屬性1=屬性1;
this.屬性2=屬性2;
...
}
程式碼如下:
//建立物件的方式3使用構造方法建立物件:
    function Person2(name,age) {
        this.name=name;
        this.age=age;
        this.eat=function () {
            console.log(name
+"大口吃飯!!!") } } var person2=new Person2("李四",18); console.log(person2.name) person2.eat();

二.原型物件

JavaScript中每個物件都有原型物件.

原型物件:原型物件,就是其它語言中的類中的靜態屬性和靜態方法,總是是靜態-static就對了.原理是: 記憶體中只有一份.

在JavaScript中,每個函式都有一個prototype屬性,這個屬性指向函式的原型物件

原型的概念:每一個javascript物件(除null外)建立的時候,就會與之關聯另一個物件,這個物件就是我們所說的原型,每一個物件都會從原型中“繼承”屬性。

建構函式與原型物件之間的關係,如圖:

 

2.__proto__

這是每個物件(除null外)都會有的屬性,叫做__proto__,這個屬性會指向該物件的原型。

 

 

 案例如下:

//原型物件,最重要的作用就是把常量和方法獨立到自身裡.   供給其它  “自己的物件” 使用. 
//定義構造方法
    function Animal(name,age) {
        this.name = name;
        this.age = age;
        }
        //原生物件中新增屬性
    Animal.prototype.color="藍色";
      //原生物件中新增方法
    Animal.prototype.eat=function () {
            console.log(this.name+"大口乾飯!!!")
      }
    var cat=new Animal("小花貓",3);
    var cat1=new Animal("tom",5);
    console.log(cat);
    console.log(cat1);
    console.log(cat.name+" "+cat.age+" "+cat.color);
    console.log(cat1.name+" "+cat1.age+" "+cat1.color);
    cat.eat();
    cat1.eat();

      /* 不過前提是,你的物件屬性裡面,沒有定義color和eat()方法.不然會把原物件的覆蓋掉
        在cat.color的時候,首先,我們檢查cat物件本身,從圖中我們知道,cat有 name和age屬性 和prototype指標屬性.
      並沒有color,找不到以後,它會繼續搜尋原型物件裡面,看能否找到color屬性,如果有,就會呼叫原型物件的屬性.*/

執行過程:

在執行cat.color的時候,首先,我們檢查cat物件本身,從圖中我們知道,cat有 name和age屬性 和prototype指標屬性.
並沒有color,找不到以後,它會繼續搜尋原型物件裡面,看能否找到color屬性,如果有,就會呼叫原型物件的屬性.

3.獲取原型物件的方式

1、從 建構函式 獲得 原型物件:

建構函式.prototype

2、從 物件例項 獲得 父級原型物件:

方法一: 物件例項.__proto__        【 有相容性問題,不建議使用】

方法二:Object.getPrototypeOf( 物件例項 )