原生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 div1 = new Elem('div1');

//console.log(div1.html());//打印HTML即DOM结构；

//赋值内容并且绑定事件

div1.html('<p>hello imooc</p>');

div1.on('click',function(){

alert('clicked');

})

//链式操作

div1.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设计和源码分析”