---------------------- 题目-------------------------
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.原型链
//构造函数
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