标签：没有 object color 隐式 原型链 typeof 框架 如何使用 程序
1.如何准确判断一个变量是数组类型
2.写一个原型链继承的例子
3.描述new一个对象的过程
4.zepto（或其他框架）源码中如何使用原型链
知识点:
1.构造函数
2.构造函数-扩展
3.原型规则和示例
4.原型链
5.instanceof
讲解:
构造函数:一般函数为大写字母开头的都是构造函数,如下:
function Foo(name,age){ this.name=name this.age=age //return this }
var f = new Foo(‘L‘,20) ; //构造函数形成实例，可以创建多个对象;f是一个空对象，原型是Foo
var a={}其实是var a=new Object()的语法糖
var a=[]其实是var a=new Array()的语法糖
function Foo(){}其实是var Foo=new Function()
instanceof用于判断引用类型属于哪个构造函数的方法
f instanceof Foo //判断f这个引用类型是否属于Foo构造函数，判断逻辑:f的_proto_一层一层往上，能否对应到Foo.prototype
判断一个变量是否为"数组"：变量名 instanceof Array，如下代码：
var arr=[]; arr instanceof Array //true typeof arr //object, typeof是无法判断是否是数组的
原型规则和示例：
1.所有的引用类型(数组、对象、函数)，都具有对象特性，即可自由扩展属性(除了"null"对象以外)
2.所有引用类型都有一个_proto_(隐式原型)属性，属性值是一个普通的对象
3.所有函数都有一个prototype(显示原型)属性,属性值也是一个普通对象
var obj={}; obj.a=100; function fn(){} fn.a=100; console.log(obj._proto_); //隐式原型，都具有可扩展属性原则 console.log(fn.prototype); //显示原型
4.所有的引用类型，_proto_属性值指向它的构造函数的"prototype"属性值
console.log(obj._proto_===Object.prototype) //obj的构造函数为new Object(),所以obj的隐式原型属性就指向Object的显示原型属性
5.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的_proto_(即它的构造函数的prototype)中寻找
1 //构造函数 2 function Foo(name,age){ 3 this.name = name 4 } 5 Foo.prototype.alertName= function(){ 6 alert(this.name+"killua"); 7 } 8 //创建示例 9 var f = new Foo("L"); 10 f.lastName = function(){ 11 console.log(this.name) 12 } 13 f.lastName(); //"L",自身属性 14 f.alertName(); //"Lkillua"，原型属性 15 //以上函数中，f共有3个属性，f自身的属性有2个(name属性和lastName属性),还有一个alertName是原型属性 16 f.firstName();//这里f自身属性中没有firstName属性，它的原型Foo函数中也么有这个属性，所以要再往上一层Foo的原型上去找这个属性，这种有多层原型的函数就是原型链，直到null为止结束原型链 17 var item; 18 for(item in f){ 19 // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议加上这个判断，保证程序的健壮性 20 if(f.hasOwnProperty(item)){ //循环遍历f函数，如果f函数有它自身的属性item,则打印出item属性 21 console.log(item) 22 } 23 }
写一个原型链继承的例子：
简单易懂的例子：
1 function Name(){ 2 this.name=function(){ 3 console.log("killua") 4 } 5 } 6 function Firstname(){ 7 this.firstname=function(){ 8 console.log("L") 9 } 10 } 11 Name.prototype = new Firstname(); 12 var he = new Name(); 13 console.log(he.name); //"killua" 14 console.log(he.firstname); //"L"
稍复杂点的例子(建议面试用)：
1 function Elem(id){ 2 this.elem = document.getElementById(id) 3 } 4 Elem.prototype.html = function(val){ 5 var elem = this.elem 6 if(val){ 7 elem.innerHTML = val 8 return this //链式操作 9 }else{ 10 return elem.innerHTML 11 } 12 } 13 Elem.prototype.on = function(type, fn){ 14 var elem = this.elem 15 elem.addEventListener(type, fn) //addEventListener() 方法用于向指定元素添加事件句柄 16 } 17 var div1 = new Elem(‘div1‘) 18 //console.log(div1.html()) 19 div1.html(‘<p>hello killua</p>‘).on(‘click‘,function(){ 20 alert(‘clicked‘) 21 }).html(‘<p>javascript</p>‘)
标签：没有 object color 隐式 原型链 typeof 框架 如何使用 程序
原文地址：http://www.cnblogs.com/chooper/p/7411098.html
