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 = ;
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>
JavaScript中的原型和原型链的更多相关文章
- Javascript中的对象和原型(3)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(三)（转载）
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(一)（转载）
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
- javascript中的对象，原型，原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- JavaScript中的继承（原型链）
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...
- 深入理解JavaScript中的继承：原型链篇
一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...
- JavaScript中的继承与原型链
先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prot ...
- javascript中的构造函数和原型及原型链
纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象 new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...
- JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记（四）
一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...
- JavaScript——中的prototype（原型）
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
随机推荐
- EXCEL 使用宏 打水印
Sub 宏1() ' ' 宏1 宏 //用于调整列宽 加边框 ' ' 快捷键: Ctrl+w ' ActiveCell.Cells.Select ActiveCell.Cells.EntireColu ...
- QT 相关
Qt是一个GUI框架,在GUI程序中,主线程也叫GUI线程,因为它是唯一被允许执行GUI相关操作的线程.对于一些耗时的操作,如果放在主线程中,就是出现界面无法响应的问题. 解决方法一:在处理耗时操作中 ...
- 用hashmap实现redis有什么问题
1.容量问题 hashmap是有最大容量的 2.时效问题 redis可以持久化,也可以定时时间 hashmap不可以持久化 3.线程并发问题 hashmap不是线程安全的(并且:多线程同时调用hash ...
- unity3d vscode
原来unity3d里assets store有一个插件,下载就行了,插件名就叫vscode 下载完了之后,preference里就会出现,vscode,Enable Integration 这一项勾上 ...
- Revit二次开发_快速显示隐藏剖面框
最近遇到一种状况需要经常切换剖面框的可见性,于是想将剖面框的显示与隐藏做成一个按钮,方便切换. 其他类似元素想做成快速切换可见性应该可以使用类似做法. 这次的隐藏对象是剖面框,所以我直接就隐藏元素了. ...
- linux下，matplotlib遇到的相关问题以及解决方法
1.在linux下运行matplotlib程序时,matplotlib的安装. 根据不同的linux系统继续相关安装: Debian / Ubuntu : sudo apt-get install p ...
- Python实现WEB QQ 登录与消息发送（第一版本 2015.06.26）
WEB QQ的登录步骤与协议,需要的度娘下,很多. 转载说明来源:http://www.cnblogs.com/ryhan/p/4602762.html 我这实现是参考了度娘搜的 和自己抓包分析的. ...
- 8、在Shell脚本中使用函数
学习目标Shell的函数 Shell程序也支持函数.函数能完成一特定的功能,可以重复调用这个函数.函数格式如下: 函数名() { 函数体 } 函数调用方式: 函数名 参数列表 实例:编 ...
- 下面我将随机抽取一名幸运女生，XXXXX
个人在经过长久以来(约等于4小时)的奋战,终于实现了一个上课老师提问并抽奖的小程序.希望这个程序变得非常非常实用 课程的理解:在我的项目开始之前,先学习了一下UML项目类图的画法,和类与类之间的关系. ...
- Hadoop实战之二~ hadoop作业调度详解(1)
对Hadoop的最感兴趣的地方,也就在于Hadoop的作业调度了,在正式介绍如何搭建Hadoop之前,深入理解一下Hadoop的作业调度很有必要.我们不一定能用得上Hadoop,但是如果理通顺Hado ...