1、原型是什么?原型链是什么?
原型是一个prototype对象,用于表示类型之间的关系;
原型链指的是在JavaScript中对象之间的继承是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。
举例:
Student——>Person——>Object:学生继承人这个类,人这个类继承对象类;
<span style="font-size:14px;">
var Person=function(){
this.age="匿名"
}; var Student=function(){};
//创建继承关系,prototype执行Person的一个实例对象
Student.prototype=new Person();
</span>
五条原型规则:
1、所有的引用类型(数组、对象、函数),都具有对象特性,即可*扩展属性(除了“null”以外);
2、所有的引用类型都有一个_proto_属性,叫隐式原型,属性值是一个普通的对象;
3、所有的函数,都有一个prototype属性,叫显式原型,属性值是一个普通的对象;
4、所有的引用类型的_proto_属性,指向它的构造函数的prototype属性值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//所有的引用类型都具有对象属性
var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn(){}
fn.a = 100;
//所有的引用类型都有一个隐式原型
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
//所有的函数都有一个prototype属性
console.log(fn.prototype);
//所有的引用类型,__proto__属性值指向它的构造函数的“prototype”属性值
console.log(obj.__proto__ === Object.prototype);
</script>
</head>
<body>
</body>
</html>
5、当试图得到一个对象的某个属性时,如果没有,会向它的_proto_中寻找,即去它的构造函数的prototype中寻找。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//构造函数
function Foo(name,age){
this.name = name;
}
Foo.prototype.alerName = function(){
alert(this.name);
}
//创建实例
var f = new Foo('zhangsan');
f.printName = function(){
console.log(this.name);
}
//测试
f.printName();
f.alerName();
</script>
</head>
<body>
</body>
</html>
再次举例:
Dog类继承了Animal类,随即拥有的Animal的eat方法(非常low的一个例子)
<script type="text/javascript">
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();
hashiqi.eat(); //animal eat
hashiqi.bark(); //dog bark
</script>
接近实战的例子(一个封装DOM查询的例子):
//一定要非常注意JavaScript的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<span>测试原型继承封装原生JavaScript</span>
</div>
</body>
<script>
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('box');
div1.html('<p>hello imooc</p>').on('click',function(){
alert('clicked');
}).html('<p>javascript</p>');
</script>
</html>