プロトタイプは JavaScript における継承の基礎です。JavaScript の継承はプロトタイプベースの継承です。関数のプロトタイプ オブジェクトは JavaScript 内にあります。関数 A を作成すると、ブラウザはオブジェクト B を作成します。メモリ。 。
プロトタイプは Javascript における継承の基礎です. JavaScript における継承はプロトタイプベースの継承です。
1.1 関数のプロトタイプ オブジェクト
JavaScript では、関数 A ( は関数の宣言を意味します ) を作成し、それを参照します。プロセッサはメモリ内にオブジェクト B を作成し、各関数はデフォルトでこのオブジェクトを指す属性 prototype を持ちます (つまり、prototype 属性の値はこのオブジェクト です)。このオブジェクト B は関数 A のプロトタイプ オブジェクトであり、関数のプロトタイプと呼ばれます。デフォルトでは、このプロトタイプ オブジェクト B は、この関数 A を指すプロパティ constructor を持ちます (つまり、コンストラクター プロパティの値は関数 A です)。
次のコードを見てください:
<body> <script type="text/javascript"> /* 声明一个函数,则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则 创建一个对象,这个对象就是这个函数的原型对象,prototype属性指向这个原型对象。这个原型对象 有一个属性叫constructor 执行了这个函数 注意:原型对象默认只有属性:constructor。其他都是从Object继承而来,暂且不用考虑。 */ function Person () { } </script> </body>
次の図は、関数を宣言した後に何が起こるかを示しています:
1.2 コンストラクターの使用オブジェクト
関数をコンストラクターとして使用し (理論的には、どの関数もコンストラクターとして使用できます)、new を使用してオブジェクトを作成する場合、オブジェクトにはデフォルトの非表示属性が設定されます。コンストラクターのプロトタイプ オブジェクト。 通常、この非表示の属性を表すために [[prototype]] を使用しますが、この属性には直接アクセスできません。
下のコードを見てください:
<body> <script type="text/javascript"> function Person () { } /* 利用构造函数创建一个对象,则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性 指向了构造函数的原型对象。 */ var p1 = new Person(); </script> </body>
下の図を見てください:
説明:
上の図からわかるように、p1 オブジェクトの作成には person コンストラクターが使用されていますが、オブジェクトの作成後、p1 オブジェクトは実際には person コンストラクターとは何の関係もありません。オブジェクトの [[ プロトタイプ ]] プロパティは、 Person コンストラクターのプロトタイプ オブジェクトを指します。
new Person() を使用して複数のオブジェクトを作成する場合、複数のオブジェクトが同時に Person コンストラクターのプロトタイプ オブジェクトを指すことになります。
このプロトタイプ オブジェクトにプロパティとメソッドを手動で追加すると、p1、p2、p3... これらのオブジェクトは、プロトタイプに追加されたプロパティとメソッドを共有します。
p1 の属性名にアクセスすると、それが p1 オブジェクト内で見つかった場合は、それが直接返されます。 p1 オブジェクト内で見つからない場合は、p1 オブジェクトの [[prototype]] 属性が指すプロトタイプ オブジェクト内を直接検索し、見つかった場合は返します。 (プロトタイプで見つからない場合は、プロトタイプのプロトタイプ-プロトタイプ チェーンの検索を続けます。これについては後で詳しく説明します)。
p1 オブジェクトを通じて属性名が追加された場合、プロトタイプ内の属性名は p1 オブジェクトに対してブロックされます。言い換えれば、p1 のプロトタイプ属性名にアクセスする方法はありません。
プロトタイプ内の属性名の値は、p1 オブジェクトを通じて読み取ることのみ可能ですが、プロトタイプ内の属性名の値を変更することはできません。 p1.name = "李思"; プロトタイプの値は変更されませんが、属性名が p1 オブジェクトに追加されます。
次のコードを見てください:
<body> <script type="text/javascript"> function Person () { } // 可以使用Person.prototype 直接访问到原型对象 //给Person函数的原型对象中添加一个属性 name并且值是 "张三" Person.prototype.name = "张三"; Person.prototype.age = 20; var p1 = new Person(); /* 访问p1对象的属性name,虽然在p1对象中我们并没有明确的添加属性name,但是 p1的 [[prototype]] 属性指向的原型中有name属性,所以这个地方可以访问到属性name 就值。 注意:这个时候不能通过p1对象删除name属性,因为只能删除在p1中删除的对象。 */ alert(p1.name); // 张三 var p2 = new Person(); alert(p2.name); // 张三 都是从原型中找到的,所以一样。 alert(p1.name === p2.name); // true // 由于不能修改原型中的值,则这种方法就直接在p1中添加了一个新的属性name,然后在p1中无法再访问到 //原型中的属性。 p1.name = "李四"; alert("p1:" + p1.name); // 由于p2中没有name属性,则对p2来说仍然是访问的原型中的属性。 alert("p2:" + p2.name); // 张三 </script> </body>
2.1 プロトタイプ属性
プロトタイプはコンストラクター内に存在します (実際には、どの関数にも存在しますが、プロトタイプがプロトタイプでない場合は注意を払いません)コンストラクター)、このコンストラクターのプロトタイプ オブジェクトを指します。
前の図を参照してください。
2.2 コンストラクター属性
コンストラクター属性はプロトタイプ オブジェクト内に存在し、コンストラクター関数を指します
次のコードを見てください。 ##
<script type="text/javascript"> function Person () { } alert(Person.prototype.constructor === Person); // true var p1 = new Person(); //使用instanceof 操作符可以判断一个对象的类型。 //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof,因为引用类型用typeof 总是返回object。 alert(p1 instanceof Person); // true </script>
必要に応じて、 Person.prototype プロパティを使用して、 Person のプロトタイプ オブジェクトとして新しいオブジェクトを指定できます。 しかし、この時点では問題が発生しています。新しいオブジェクトのコンストラクター プロパティは、人物コンストラクターを指さなくなりました。次のコードを見てください:
<script type="text/javascript"> function Person () { } //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数 Person.prototype = { name:"志玲", age:20 }; var p1 = new Person(); alert(p1.name); // 志玲 alert(p1 instanceof Person); // true alert(Person.prototype.constructor === Person); //false //如果constructor对你很重要,你应该在Person.prototype中添加一行这样的代码: /* Person.prototype = { constructor : Person //让constructor重新指向Person函数 } */ </script>
2.3 __proto__ 属性 (注: 左右に 2 つのアンダースコアがあります)
コンストラクター メソッドで作成する 新しいオブジェクトが作成されると、デフォルトでこのオブジェクトにアクセスできない属性 [[prototype]] が作成され、コンストラクターのプロトタイプ オブジェクトを指します。 ただし、一部のブラウザでは、この属性 [[プロトタイプ]] へのアクセスも提供されています (Chrome ブラウザと Firefox ブラウザ。IE ブラウザはサポートしていません)。アクセス方法: p1.__proto__ ただし、不注意な操作を行うと、このオブジェクトの継承プロトタイプ チェーンが変更されるため、開発者はこの方法でアクセスしないようにしてください。<script type="text/javascript"> function Person () { } //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数 Person.prototype = { constructor : Person, name:"志玲", age:20 }; var p1 = new Person(); alert(p1.__proto__ === Person.prototype); //true </script>
2.4 hasOwnProperty() メソッド
大家知道,我们用去访问一个对象的属性的时候,这个属性既有可能来自对象本身,也有可能来自这个对象的[[prototype]]属性指向的原型。
那么如何判断这个对象的来源呢?
hasOwnProperty方法,可以判断一个属性是否来自对象本身。
<script type="text/javascript"> function Person () { } Person.prototype.name = "志玲"; var p1 = new Person(); p1.sex = "女"; //sex属性是直接在p1属性中添加,所以是true alert("sex属性是对象本身的:" + p1.hasOwnProperty("sex")); // name属性是在原型中添加的,所以是false alert("name属性是对象本身的:" + p1.hasOwnProperty("name")); // age 属性不存在,所以也是false alert("age属性是存在于对象本身:" + p1.hasOwnProperty("age")); </script>
所以,通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的,但是不能判断是否存在于原型中,因为有可能这个属性不存在。
也即是说,在原型中的属性和不存在的属性都会返回fasle。
如何判断一个属性是否存在于原型中呢?
2.5 in 操作符
in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候,现在对象本身中找,如果对象找不到再去原型中找。换句话说,只要对象和原型中有一个地方存在这个属性,就返回true
<script type="text/javascript"> function Person () { } Person.prototype.name = "志玲"; var p1 = new Person(); p1.sex = "女"; alert("sex" in p1); // 对象本身添加的,所以true alert("name" in p1); //原型中存在,所以true alert("age" in p1); //对象和原型中都不存在,所以false </script>
回到前面的问题,如果判断一个属性是否存在于原型中:
如果一个属性存在,但是没有在对象本身中,则一定存在于原型中。
<script type="text/javascript"> function Person () { } Person.prototype.name = "志玲"; var p1 = new Person(); p1.sex = "女"; //定义一个函数去判断原型所在的位置 function propertyLocation(obj, prop){ if(!(prop in obj)){ alert(prop + "属性不存在"); }else if(obj.hasOwnProperty(prop)){ alert(prop + "属性存在于对象中"); }else { alert(prop + "对象存在于原型中"); } } propertyLocation(p1, "age"); propertyLocation(p1, "name"); propertyLocation(p1, "sex"); </script
3.1 原型模型创建对象的缺陷
原型中的所有的属性都是共享的。也就是说,用同一个构造函数创建的对象去访问原型中的属性的时候,大家都是访问的同一个对象,如果一个对象对原型的属性进行了修改,则会反映到所有的对象上面。
但是在实际使用中,每个对象的属性一般是不同的。张三的姓名是张三,李四的姓名是李四。
==但是,这个共享特性对 方法(属性值是函数的属性)又是非常合适的。==所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。
3.2 构造函数模型创建对象的缺陷
在构造函数中添加的属性和方法,每个对象都有自己独有的一份,大家不会共享。这个特性对属性比较合适,但是对方法又不太合适。因为对所有对象来说,他们的方法应该是一份就够了,没有必要每人一份,造成内存的浪费和性能的低下。
<script type="text/javascript"> function Person() { this.name = "李四"; this.age = 20; this.eat = function() { alert("吃完东西"); } } var p1 = new Person(); var p2 = new Person(); //每个对象都会有不同的方法 alert(p1.eat === p2.eat); //fasle </script>
可以使用下面的方法解决:
<script type="text/javascript"> function Person() { this.name = "李四"; this.age = 20; this.eat = eat; } function eat() { alert("吃完东西"); } var p1 = new Person(); var p2 = new Person(); //因为eat属性都是赋值的同一个函数,所以是true alert(p1.eat === p2.eat); //true </script>
但是上面的这种解决方法具有致命的缺陷:封装性太差。使用面向对象,目的之一就是封装代码,这个时候为了性能又要把代码抽出对象之外,这是反人类的设计。
3.3 使用组合模式解决上述两种缺陷
原型模式适合封装方法,构造函数模式适合封装属性,综合两种模式的优点就有了组合模式。
<script type="text/javascript"> //在构造方法内部封装属性 function Person(name, age) { this.name = name; this.age = age; } //在原型对象内封装方法 Person.prototype.eat = function (food) { alert(this.name + "爱吃" + food); } Person.prototype.play = function (playName) { alert(this.name + "爱玩" + playName); } var p1 = new Person("李四", 20); var p2 = new Person("张三", 30); p1.eat("苹果"); p2.eat("香蕉"); p1.play("志玲"); p2.play("凤姐"); </script>
前面讲到的组合模式,也并非完美无缺,有一点也是感觉不是很完美。把构造方法和原型分开写,总让人感觉不舒服,应该想办法把构造方法和原型封装在一起,所以就有了动态原型模式。
动态原型模式把所有的属性和方法都封装在构造方法中,而仅仅在需要的时候才去在构造方法中初始化原型,又保持了同时使用构造函数和原型的优点。
看下面的代码:
<script type="text/javascript"> //构造方法内部封装属性 function Person(name, age) { //每个对象都添加自己的属性 this.name = name; this.age = age; /* 判断this.eat这个属性是不是function,如果不是function则证明是第一次创建对象, 则把这个funcion添加到原型中。 如果是function,则代表原型中已经有了这个方法,则不需要再添加。 perfect!完美解决了性能和代码的封装问题。 */ if(typeof this.eat !== "function"){ Person.prototype.eat = function () { alert(this.name + " 在吃"); } } } var p1 = new Person("志玲", 40); p1.eat(); </script>
推荐教程:《JS教程》
以上がJavaScript プロトタイプを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。