Vue.js入門悪補JavaScriptのオブジェクト継承モデルとthisバインド
2235 ワード
JavaScriptはオブジェクトだけでクラスのない言語で、万物がオブジェクトです.関数もオブジェクトインスタンスです.
だから継承するときはオブジェクトで継承を実現し、このオブジェクトがプロトタイプオブジェクトです.オブジェクト自体のプロトタイプオブジェクトはprototypeでアクセスできます.
クラス継承ではなく、オブジェクト継承であることを覚えておいてください!!!
オブジェクトで継承するため、プロトタイプオブジェクトは静的オブジェクトとして理解できます.
多重継承は自然にプロトタイプチェーンを生み出す.
次のコードは、この問題を説明します.
function Person(name){ this.name = name, this.sayName = function(){alert(this.name);} }
var person1 = new Person("Person1"); var person2 = new Person("Person2");
alert(person1.sayName != person2.sayName);
実行出力:true
このとき、メンバー関数も通常のメンバーオブジェクトになります.これでは,複数のオブジェクトが1つの関数を共有することが問題となる.
そのため、JavaScriptにはプロトタイプオブジェクトが表示されます.プロトタイプオブジェクトはオブジェクトです.このオブジェクトはすべてのインスタンスが共有されるため、本当の意味のメンバー関数とメンバー属性も共有されます.
次の例では、プロトタイプオブジェクトの意味を完全に示します.
出力の実行:
StaticPerson Person1 Person1 Person2 Person2 true false
以下は『JavaScriptプレミアムプログラミング第3版』Nicholasなどの著書を引用し、郵便出版社が出版した一節を引用する.
1 thisオブジェクトは、実行時に関数に基づく実行環境にバインドされます.
2グローバル関数では、thisはwindowに等しい.
3関数がオブジェクトのメソッドとして呼び出されると、thisはそのオブジェクト自体に等しい.
4匿名関数はグローバル役割ドメインに属する.
3 thisは呼び出し元に等しい
次のコードは誰ですか?
var person = new Object(); person.name = "Jim"; person.sayName = function(){alert(this.name);};//関数がオブジェクトとして呼び出されると、この関数thisオブジェクトを呼び出すのはpersonです.sayName();
運転表示:Jim
次のように書くと分かりやすいと思います.
var person = { name:"Jim", sayName:function(){alert(this.name);} } person.sayName();
運転表示:Jim
だから継承するときはオブジェクトで継承を実現し、このオブジェクトがプロトタイプオブジェクトです.オブジェクト自体のプロトタイプオブジェクトはprototypeでアクセスできます.
クラス継承ではなく、オブジェクト継承であることを覚えておいてください!!!
オブジェクトで継承するため、プロトタイプオブジェクトは静的オブジェクトとして理解できます.
多重継承は自然にプロトタイプチェーンを生み出す.
次のコードは、この問題を説明します.
function Person(name){ this.name = name, this.sayName = function(){alert(this.name);} }
var person1 = new Person("Person1"); var person2 = new Person("Person2");
alert(person1.sayName != person2.sayName);
実行出力:true
このとき、メンバー関数も通常のメンバーオブジェクトになります.これでは,複数のオブジェクトが1つの関数を共有することが問題となる.
そのため、JavaScriptにはプロトタイプオブジェクトが表示されます.プロトタイプオブジェクトはオブジェクトです.このオブジェクトはすべてのインスタンスが共有されるため、本当の意味のメンバー関数とメンバー属性も共有されます.
次の例では、プロトタイプオブジェクトの意味を完全に示します.
function Person(name){
this.name = name,
this.sayName = function(){console.log(this.name);}
}
Person.prototype.name = "StaticPerson";//Person.prototype
Person.prototype.sayProtoName = function(){console.log(this.name);}//
var person1 = new Person("Person1");
var person2 = new Person("Person2");
Person.prototype.sayProtoName();//StaticPerson
person1.sayName();//person1
person1.sayProtoName();//person1
person2.sayName();//person2
person2.sayProtoName();//person2
console.log(person1.sayProtoName == person2.sayProtoName);//
console.log(person1.sayName == person2.sayName);//
出力の実行:
StaticPerson Person1 Person1 Person2 Person2 true false
以下は『JavaScriptプレミアムプログラミング第3版』Nicholasなどの著書を引用し、郵便出版社が出版した一節を引用する.
1 thisオブジェクトは、実行時に関数に基づく実行環境にバインドされます.
2グローバル関数では、thisはwindowに等しい.
3関数がオブジェクトのメソッドとして呼び出されると、thisはそのオブジェクト自体に等しい.
4匿名関数はグローバル役割ドメインに属する.
3 thisは呼び出し元に等しい
次のコードは誰ですか?
var person = new Object(); person.name = "Jim"; person.sayName = function(){alert(this.name);};//関数がオブジェクトとして呼び出されると、この関数thisオブジェクトを呼び出すのはpersonです.sayName();
運転表示:Jim
次のように書くと分かりやすいと思います.
var person = { name:"Jim", sayName:function(){alert(this.name);} } person.sayName();
運転表示:Jim