js 靜態 原型 例項屬性

2021-06-26 22:59:32 字數 2384 閱讀 8047

本篇來說一下js中的屬性:

1、靜態屬性

2、原型屬性

3、例項屬性

靜態屬性:

function klass(){}

var obj=new klass();

klass.count=0;

klass.count++;

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

console.log(klass.count);//1

靜態屬性存在於物件中。它的訪問方式只有:類名.count 一種方式,無法通過例項訪問。

如:math.pi

原型屬性:

在講解原型屬性之前有必要先提一下new操作符:

①:var obj=klass()和②:var obj=new klass()的結果顯然是不同的。

①的操作僅僅是簡單的呼叫klass函式,然後把klass函式的返回值賦給obj變數。

②所做的操作是:呼叫建構函式klass,建立乙個包含prototype內部指標的新物件obj。

直**來:使用new操作符是建立該類的例項物件,而不使用new操作符則是直接呼叫函式。

好了,下面繼續看原型屬性:

原型屬性又稱公共屬性,它不屬於某個類的例項,而是直接屬於某個類。

function klass(){}

var obj=new klass();

klass.prototype.count=0;

klass.prototype.count++;

console.log(klass.prototype.count);//1

console.log(obj.count);//1

原型屬性存在類的原型之中。它的訪問方式有兩種:

1、類名.prototype.count

2、例項物件.count

第二種訪問方式的原理是:

首先在例項物件中查詢,如果找到則立即返回,否則在原型(原型鏈)中查詢(因為new操作符建立的物件包含了乙個prototype的內部指標,所以可以向上追溯,查詢屬性),找到則返回相應的值,否則返回undefined。

所以obj.count的方式實際操作的是klass.prototype.count屬性。

再看下面的例子:

function klass(){}

var obj=new klass();

klass.prototype.count=0;

klass.prototype.count++;

obj.count++;

console.log(klass.prototype.count);//1

console.log(obj.count);//2

與上面不同的是僅僅加了一句obj.count++;按照屬性查詢的原理,obj中並不存在count屬性,所以他會在原型鏈中查詢count屬性,返回klass.prototype.count。

obj.count++即可拆分為更加直觀的:obj.count=klass.prototype.count+1;可以看出這一句話是簡單的賦值也是屬性定義:

首先給obj定義了乙個例項屬性count,再將klass.prototype.count+1的結果賦值給obj.count。

所以klass.prototype.count的結果為1,obj.count的結果是2。

以上便是要講解的第三者屬性:例項屬性。

例項屬性是公開的(public),可以通過類的例項(或this.)直接訪問和修改它。也就是歸屬例項所有。

明白了相應的概念,我們再來講一下他們各自的使用場合,看下面的例子:

function klass(id)

klass.uid=1;

klass.prototype.names=;

var obj1=new klass("obj1");

var obj2=new klass("obj2");

obj1.names.push(obj1.id);

klass.uid++;

obj1.names.push(obj2.id);

klass.uid++;

console.log(obj1.id);//obj1

console.log(obj2.id);//obj2

console.log(klass.prototype.names);//obj1 , obj2

console.log(klass.uid);//3

他們的應用場合顯而易見,靜態屬性是全域性的,原型屬性是例項公有的,例項屬性是各個例項所獨有的。 

js中例項方法 靜態方法和原型方法詳解

之前一直以為建構函式可以直接訪問原型方法,是錯的,現在說一下 建構函式中this上新增的成員 在cat構造方法裡面,定義在this中的變數和方法,只有例項才能訪問到 如this.name,this.move,this.eat這些都是例項擁有,無法通過cat直接呼叫。function cat name...

js中函式 例項 原型屬性 建構函式的關係

1 任何函式,即function,都有乙個prototype屬性,即原型屬性。2 任何prototype屬性中都有乙個construtor屬性,指向function function test console.log test.prototype.constructor test true 3 當通...

dhl C 靜態屬性和例項屬性

當屬性宣告包含static修飾符時,稱該屬性為靜態屬性。當不存在static修飾符時,稱該屬性為例項屬性。靜態屬性不與特定例項相關聯,因此在靜態屬性的訪問器內引用this是編譯時錯誤。靜態屬性和方法都不能在例項化的物件中引用,而且靜態屬性和靜態方法都不能使用this關鍵字來加以限定,而只能用類名來加...