JavaScript中的原型和原型链
2024-08-29 10:21:28
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 = ;
var arr = [];
arr.a = ;
function fn(){}
fn.a = ; //所有的引用类型都有一个隐式原型
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>
最新文章
- Newtonsoft.Json, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b9a188c8922137c6
- c# .Net :Excel NPOI导入导出操作教程之读取Excel文件信息及输出
- 使用syncthing进行双机文件同步
- 站内信对话列表sql语句
- 利用代码生成工具Database2Sharp设计数据编辑界面
- Redhat修改主机名_Red hat怎么永久修改主机名hostname(转)
- Delphi的时间处理
- Linux/Unix工具与正则表达式的POSIX规范
- 163k地方门户网站系统团购定时结束限量控制
- JAVA设计模式(08):结构化-飞锤(Flyweight)
- Android音频系统之AudioPolicyService
- vim 简单笔记
- [JLOI2014] 松鼠的新家
- Gitlab中README.MD编写格式模板
- Android开发之自定义的ProgressDialog
- spring学习 十 schema-based 异常通知,和环绕通知
- stun服务器搭建(coTurn)
- Mysql5.7登录错误1045和1130的解决方法,亲测有用,希望能帮助到你们。
- 用go实现的一个堆得数据结构
- Juint测试