本文主要和大家分享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>'); 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设计和源码分析”
相关推荐:
学习javascript面向对象 理解javascript原型和原型链_javascript技巧
Atas ialah kandungan terperinci JS原型和原型链详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!