---------------------- 题目-------------------------
1. 如何准确判断一个变量是数组类型
//变量 instanceof Array
var arr = [];
arr instanceof Array;//true
typeof arr; //object,typeof是无法判断是否是数组的
2. 写一个原型链继承的例子
function Person(name,sex){
this.name = name;
this.sex = sex;
}
Person.prototype.showName=function(){
alert(this.name);
};
Person.prototype.showSex = function(){
alert(this.sex);
};
function Worker(name,sex,job){
Person.call(this,name);
this.job = job;
}
for(var i in Person.prototype){
Worker.prototype[i]=Person.prototype[i];
}
Worker.prototype.showJob=function(){
alert(this.job);
};
var P1= new Person('blue','men');
var W1= new Worker('leo','men','coder');
P1.showName();
P1.showSex();
W1.showName();
W1.showSex();
W1.showJob();
*贴近实际开发原型链继承的例子
/*------------封装DOM查询------------------*/
//（获取一个dom节点，获取内容，改变内容，绑定事件）
function Element(id){
this.elem = document.getElementById(id);
}
Element.prototype.html=function(val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
//把整个对象(div1)返回出去
return this;//链式操作
}else{
//把当前html结构返回出来
return elem.innerHTML;
}
};
Element.prototype.on=function(type,fn){
var elem = this.elem;
elem.addEventListener(type,fn);
//把整个对象(div1)返回出去
return this;//链式操作
};
var div1 = new Element('main-outer');
div1.html('<p>test immoc</p>').on('click',function(){
alert('click');
}).html('<p>javascript</p>');
3. 描述new一个对象的过程（构造函数）
1. 创建一个新对象
2.this指向这个新对象
3. 执行代码，即对this赋值
4. 返回this
function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class-1';
//构造函数默认不要写return this，让它自己返回就
// return this //默认有一行
}
// new 就是构造函数形成一个实例的过程
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);//创建多个对象
// 考察构造函数 new 原理
4. zepto（或其他框架）源码中如何使用原型链
* 阅读源码是高效提高技能的方式
* 不能埋头苦钻有技巧在其中
* 慕课网搜“zepto设计和源码分析”
--------------------------- 知识点-------------------------------
1. 构造函数
// 大写字母开头的函数是构造函数
// 构造函数类似于模板可以创建多个对象
function Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class-1';
// return this //默认有一行
}
// new 就是构造函数形成一个实例的过程
var f = new Foo('zhangsan',20);
//var f1 = new Foo('lisi',22);//创建多个对象
//*new一个构造函数返回一个对象的过程
1、先new的时候把参数传进去（当然也可以不传）
2、new这个函数执行的时候，函数里边的this会先变成一个空对象，
再this.name这些属性的赋值，赋值完之后默认把this return回来，
赋值给f，f就具备了f.name='zhangsan'。
2. 构造函数--扩展
// 所有的引用类型(对象、数组、函数)都有构造函数；
//对象有构造函数、数组有构造函数、函数也有构造函数
var a ={}其实是var a = new Object()的简写；
a 的构造函数是 Object；
var a = []其实是var a = new Array()的简写；
a 的构造函数是Array
function Foo(){...}其实是var Foo = new Function(...);
Foo 的构造函数是Function；
//推荐写法都推荐前面的写法：
var a ={}; var a =[]; function Foo(){...}
* 使用instanceof判断一个函数是否是一个变量的构造函数；
//判断一个变量是否为“数组”：变量 instanceOf Array
3. 原型规则和示例
* 5条原型规则
// 原型规则是学习原型链的基础
1.所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展
属性（除了"null"以外）
var obj = {}; obj.a =100;
var arr = []; arr.a =100;
function fn(){} fn.a =100;
2.所有的引用类型（数组、对象、函数不包括null），都有一个_proto_（隐式原型）
属性，属性值是一个普通的对象
console.log(obj._proto_);
console.log(arr._proto_);
console.log(fn._proto_);
3、所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通的对象
console.log(fn.prototype);
4、所有的引用类型（数组、对象、函数）,_proto_属性值指向(完全等)它的构造函数
的 "prototype"属性值
// var obj = new Object();
console.log(obj._proto_ === object.prototype);//true
5、当试图得到一个对象的某个属性时，如果这个对象（引用类型--数组、函数、对象）
本身没有这个属性，那么会去它的_proto_(即它的构造函数的prototype)中寻找。
//隐式原型等于它的构造函数显式原型
//*****一个变量本身没有属性，它会去它的构造函数的显式原型中去寻找********/
console.log(obj._proto_ === Object.prototype);
//构造函数
function Foo(name,age){
this.name = name;
}
Foo.prototype.showName=function(){
alert(this.name);
};
//创建示例
var f = new Foo('zhangsan');
f.consoleName = function(){
console.log(this.name);
};
//测试
f.consoleName();//'zhangsan'
//一个变量本身没有属性，它会去它的构造函数的显式原型中去寻找
//无论是函数自身的属性还是原型中得到的一个属性,函数执行中的this永远指向f自身；
f.showName(); //'zhangsan'
*循环对象的自身属性*
/**高级浏览器已经在 for in中屏蔽了来自原型的属性,但是这里建议大家还是加上这个判断，保证程序的健壮性 **/
/**在遍历f的时候判断一下遍历出来的item是不是能通过hasOwnProperty验证；如果通过之后就说明是f自身的属性，没通过就说明是f通过原型得到的属性**/
//for in 可以对一个对象进行循环的
var item;
for(item in f){
if(f.hasOwnProperty(item)){
console.log(item);
}
}
4.原型链
原型链示意图.png
原型链示例.png
//构造函数
function Foo(name,age){
this.name = name;
}
Foo.prototype.showName=function(){
alert(this.name);
};
//创建示例
var f = new Foo('zhangsan');
f.consoleName=function(){
console.log(this.name);
};
//测试
f.cosoleName();
/**获取的f隐式原型（f的构造函数显式原型里面的定义的一个值就是定义
的showName这个属性值并且执行了）里面的属性**/
f.showName();
/**当这个对象没有这个属性的时候就会去它自身的一个隐式原型（它构造函
数的显式原型）中去找***/
//构造函数是Foo 显式原型是Foo.prototype.中并没有toString这个东西
/*f.prototype构造函数的显式原型也是一个对象，在它中寻找t oString这个
方法;要去它的隐式原型（f._proto_._proto_）中去找*/
/**原型链（去f的隐式原型（f._proto_）中去找，f._proto_没有toString
f._proto_也是一个对象),在这个对象里面找toString，还得到它本身的隐式
原型中去找*/
f.toString();
5. instanceof--(类型判断）---是原型链一个具体的表现而已)
//用于判断引用类型属于哪个构造函数的方法
f instaceof Foo的判断逻辑是:
//》f的_proto_一层一层往上，能否对应到Foo.prototyoe
//》在试着判断f instanceof Object
网友评论