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>
时间： 2024-10-17 17:23:40