この記事では主に、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('<p>hello imooc</p>'); p1.on('click',function(){ alert('clicked'); }) //链式操作 p1.html('<p>hello imooc</p>').on('click',function(){ alert('clicked'); }).html('<p>javascript</p>'); 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 サイトの他の関連記事を参照してください。