JavaScript中的原型和原型链
Posted Z皓
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中的原型和原型链相关的知识，希望对你有一定的参考价值。
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>
以上是关于JavaScript中的原型和原型链的主要内容，如果未能解决你的问题，请参考以下文章