Detailed explanation of JS prototype and prototype chain

This article mainly shares with you detailed examples of JS prototype and prototype chain, hoping to help everyone have a clearer understanding of JS prototype and prototype chain.

Constructor (the first letter of the function name is capitalized): similar to a template

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);创建多个对象

Constructor - extension: (all reference types have constructors)

var a = {} is actually the syntactic sugar of var a = new Object()

var a = [] is actually the syntactic sugar of var a = new Array()

function Foo(){.. .} In fact, it is var Foo = new Function()

Use instanceof to determine whether a function is a reference type constructor

*Prototype rules and examples: (Prototype rules are for learning the prototype chain Basics)

5 Prototype Rules:

-All reference types (objects, arrays, functions) have object characteristics and can be freely extended with attributes (except 'null')

-All reference types (objects, arrays, functions) have a __proto__ (implicit prototype) attribute, and the attribute value is an ordinary object

-All functions have a prototype (display prototype) attribute, the attribute value is also an ordinary object

-all reference types (objects, arrays, functions), the __proto__ attribute value points to the "prototype" attribute value of its constructor, that is

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

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

-When trying to get the attributes of an object, if the object itself does not have this attribute, then it will go to its __proto__ (that is, the prototype of its constructor) to find

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

Prototype chain:

Write an example of encapsulating DOM query:

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. How to accurately determine whether a variable is an array type?

Variable instanceof Array

2. Write an example of prototype chain inheritance

//动物
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);

-Create a new object

-this.Point to this new object

-Execute the code, that is, assign a value to this

-Return this

4. How to use the prototype chain in the source code of zepto (or other frameworks)?

-Reading source code is an efficient way to improve skills

-But you can’t “immerse yourself in it” and have skills

-Search “zepto design and source code analysis” on MOOC.com ”

Related recommendations:

Detailed explanation of prototypes and prototype chains in JavaScript_Basic knowledge

Understanding prototypes and prototype chains in JavaScript_ Basic knowledge

Learn javascript object-oriented understanding javascript prototype and prototype chain_javascript skills

The above is the detailed content of Detailed explanation of JS prototype and prototype chain. For more information, please follow other related articles on the PHP Chinese website!