詳細なJavaScriptオブジェクトのプロトタイプ

1.  オブジェクトのプロトタイプ試作

1.1。  OVERLOAD

次のようにコンストラクタは、子猫を作成します。

関数猫(名前、色){

this.name =名前;

this.color =色。

 

this.run =関数(){

    警告(「」+この +「子猫は飛んできました...」);

}

this.eat =関数(){

    警告( "this.name + 魚に");

}

}

 

VaRのCAT1 =新しい猫();

上記のすべてこの定義方法は、この新しいインスタンスを作成するときに、新しいインスタンスが表す、方法のコピーを作成します。

それは少し冗長、どのように解決することではありませんか

分析:クラスレベル、クラスの各インスタンスは、自動的に十分を持っている場合、各タイプは、各インスタンスの特性を有しているが、実際に廃棄レベルは定義の一般的な特性、次に、定義されています。ここでは、使用するプロトタイプを

1.2。  試作品を使用してください

1.2.1  prototypeプロパティ

JavaScript 、機能自体も、「法」と、オブジェクトの「プロパティ」が含まれています。このような方法は、以前に学習した(例えば、コンストラクタ() と属性のような名前長さなどが挙げられます。

 

今、新しいプロパティを導入する - プロトタイププロトタイプを

 

我々が作成した各機能 プロトタイプ(原型)プロパティは、彼がオブジェクトを指し、オブジェクトが含まれる特定のタイプのすべてのインスタンスで共有することができるプロパティとメソッドを使用することです。 

 

// コンストラクタを定義します

関数人(名前、年齢){

}

// パラメータの数の形状関数

console.debug(人物.LENGTH)// ==> 2

// コンストラクタ

console.debug(人物.constructor)// ==>関数()

// プロトタイプのタイプ

console.debug(typeof演算Person.prototype)// ==>オブジェクト

// プロトタイプの内容

console.debug(Person.prototype)// ↓↓

spacer.gif 

每一个类(构造函数)都具有一个prototype属性,当创建这个类的实例对象原型对象的所有属性都被立即赋予要创建的对象中。

 

1.2.2. 原型操作

设值:

 

构造函数.原型.属性=属性值

构造函数.原型.方法=函数

 

取值:

   

   对象.属性

对象.方法()

 

1.2.3. 属性访问的优先级

原生属性的优先级高于原型属性。遵循从上到下查找:

spacer.gif 图片1.png

 

1.2.4. 神秘的__proto__属性

访问对象上面的属性,直接通过object.name访问。

神奇的user.__proto__属性,该属性其实就是对应User类的prototype属性。

console.debug(user.__proto__===User.prototyp);//==> true;

 

_proto_属性属于对象实例,prototype属性类的属性。

每个对象在创建后,都会自动建立一个到prototype上的引用,让对象具备类型原型的所有特征。

 

一个对象中的__proto__(prototype)属性中的成员,可以直接通过object.成员进行访问。

 

总结:每个类都有独立的prototype属性,向prototype对象上面添加属性,对象实例可以共享prototype对象上面的属性,如果对象本身已存在某个属性,使用对象本身上面的属性,如果没有则使用prototype上面的属性,如果是添加属性添加到对象上面,不影响对象的原型对象。

 

 

1.2.5. 
扩展内置对象

1.2.5.1. 扩展Array对象

我们都知道,Array对象里没有insert(插入)和remove(删除)两个方法,都是用一个splice方法完成插入、删除等操作。

// 在指定位置插入操作

Array.prototype.insert=function(index, obj){

   this.splice(index, 0, obj);

}

 

// 在指定位置删除内容

Array.prototype.remove=function(index){

   this.splice(index, 1);

}

1.2.5.2. 扩展HTMLElement对象

在新版浏览器中,所有的有DOM元素都继承于HTMLElement构造器。通过访问HTMLElement的原型,浏览器可以为我们提供扩展任意HTML节点的能力。

HTMLElement.prototype.remove = function() {

   if(this.parentNode){

          this.parentNode.removeChild(this);

   }

}


おすすめ

転載: blog.51cto.com/1388969/2424506
おすすめ