JSプロトタイプとプロトタイプチェーンの詳細説明

この記事では主に、JS プロトタイプとプロトタイプ チェーンの例の詳細な説明を共有し、誰もが JS プロトタイプとプロトタイプ チェーンをより明確に理解できるようにしたいと考えています。

コンストラクター (関数名の最初の文字が大文字): テンプレートに似ています

function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class1';
//return this;默认有这一行
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);创建多个对象

コンストラクター - 拡張: (すべての参照型にはコンストラクターがあります)

var a = {} は実際には var a = new Object() 構文Sugar

var a = [] は実際には var a = new Array() のシュガー構文です

function Foo(){...} は実際には var Foo = new Function() です

関数が参照型のコンストラクター

*プロトタイプのルールと例: (プロトタイプ ルールはプロトタイプ チェーンを学習するための基礎です)

5 つのプロトタイプ ルール:

-すべての参照型 (オブジェクト、配列、関数) にはオブジェクト特性があります。属性を自由に拡張できます (「null」を除く)

- すべての参照型 (オブジェクト、配列、関数) には __proto__ (暗黙のプロトタイプ) 属性があり、属性値は通常のオブジェクトです

- すべての関数にはプロトタイプ (show __proto__ 属性値は、そのコンストラクターの "prototype" 属性値を指します。つまり、

var obj = { }; ==> var obj = new Object();

console.log(obj.__proto__ === Object.prototype)

- オブジェクト自体が持っていない場合この属性は、その __proto__ (つまり、そのコンストラクターのプロトタイプ) 内で検索されます。

var item;
for(item in f){
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是在这里建议大家加上这个判断，保证程序的健壮性
if(f.hasOwnProperty(item)){
console.log(item);
}
}

プロトタイプ チェーン:

DOM クエリをカプセル化する例を作成します:

function Elem(id){
this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
return this;//为了后边的链式操作
}else{
return elem.innerHTML;
}
}
Elem.prototype.on  = function(type,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
//如果添加return this,后边还可以接链式操作
}
var p1 = new Elem('p1');
//console.log(p1.html());//打印HTML即DOM结构；
//赋值内容并且绑定事件
p1.html(&#39;<p>hello imooc</p>&#39;);
p1.on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
})
//链式操作
p1.html(&#39;<p>hello imooc</p>&#39;).on(&#39;click&#39;,function(){
alert(&#39;clicked&#39;);
}).html(&#39;<p>javascript</p>&#39;);
instanceof：
用来判断是否为该对象的构造函数
对象 instanceof Function/Array/Object;

1. 変数の値を正確に判断する方法配列型?

Array の変数インスタンス

2. プロトタイプ チェーンの継承の例を作成します

//动物
function Animal(){
this.eat = function(){
console.log('animal eat');
}
}
//狗
function Dog(){
this.bark = function(){
console.log('dog bark');
}
}
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
3.描述new一个对象的过程
function Foo(){
this.name = name;
this.age = age;
this.class = 'class1'
//return this;
}
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);

- 新しいオブジェクトを作成します

。この新しいオブジェクトを指します

- コードを実行します、つまり、this に値を割り当てます

-これを返してください

4.zepto (または他のフレームワーク) ソース コードでプロトタイプ チェーンを使用するにはどうすればよいですか?

-ソースコードを読むことはスキルを向上させる効率的な方法です

-しかし、スキルを身につけるために「一生懸命働く」ことはできません

-MOOC.comで「zeptoのデザインとソースコード分析」を検索してください

関連する推奨事項:

JavaScriptの中型プロトタイプ プロトタイプチェーンの詳しい説明_基礎知識

JavaScriptのプロトタイプとプロトタイプチェーンを理解する_基礎知識

JavaScriptのオブジェクト指向を学ぶJavaScriptプロトタイプとプロトタイプチェーンを理解する_JavaScriptスキル

以上がJSプロトタイプとプロトタイプチェーンの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。