本文主要和大家分享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()的语法糖
var a = [] 其实是 var a = new Array()的语法糖
function Foo(){...} 其实是 var Foo = new Function()
使用instanceof判断一个函数是否是一个引用类型的构造函数
*原型规则和示例：（原型规则是学习原型链的基础）
5条原型规则：
-所有的引用类型（对象、数组、函数），都具有对象特性，即可自由扩展属性（除了'null'以外）
-所有的引用类型（对象、数组、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象
-所有的 函数 都有一个prototype（显示原型）属性，属性值也是一个普通的对象
-所有的引用类型（对象、数组、函数），__proto__属性值指向它的构造函数的"prototype"属性值, 即
var obj = {}; ==> var obj = new Object();
console.log(obj.__proto__ === Object.prototype)
-当试图得到一个对象的属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找
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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10615" title="phpweb1.0 美化简洁版"><img
src="https://img.php.cn/upload/webcode/000/000/016/176300461310404.jpg" alt="phpweb1.0 美化简洁版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10615" title="phpweb1.0 美化简洁版">phpweb1.0 美化简洁版</a>
<p>phpweb1.0基于php+mysql+smarty开发的企业解决方案,总体感觉简洁快速,适合小型企业的建站方案，也适合初学者学习。 之前发布过phpweb1.0的原始版本,仅提供大家交流和学习,但很多的爱好者提出了一些不足和好评,本不想继续开发1.0,因为2.0已经开发完毕而且构架与1.0完全不同,但是有些使用者喜欢这种简洁和简便，应大家的要求,美化和优化了一些不足之处。后台更加简洁美观。</p>
</div>
<a href="/xiazai/code/10615" title="phpweb1.0 美化简洁版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>');
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.如何准确判断一个变量是数组类型？
变量 instanceof 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.指向这个新对象
-执行代码，即对this赋值
-返回this
4.zepto(或其他框架)源码中如何使用原型链？
-阅读源码是高效提高技能的方式
-但不能“埋头苦钻”有技巧在其中
-慕课网搜索“zepto设计和源码分析”
相关推荐：
