理解javascript中的原型和原型链


Posted in Javascript onJuly 30, 2015

原型

大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型。代码实现大概是这样子的

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

       Kimy本身是没有say方法的,当他在自己对象中找不到该方法时就回去他的原型中查找,也就是Student.prototype对象中查找。这里我们用到了一个构造函数Student

构造函数、__proto__以及原型链

除了IE浏览器,其他浏览器都在Object对象的实例上,部署了一个非标准的__proto__属性(前后各两个下划线),指向该对象的原型对象,即构造函数的prototype属性。

盗用一段代码和一张图

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

理解javascript中的原型和原型链

我们可以看到,每个对象都是含有一个__proto__属性,b的__proto__指向的构造b的构造方法Foo的prototype属性;而Foo.prototype也是一个对象,本身也有一个__proto__指向构造其的构造方法Object的prototype。Object.prototype的__proto__被指向了 null, 这就形成了一个原型链了。

这里还要能理解这样一段代码

Object instanceof Function
//true
Function instanceof Object
//true

new做了什么

这里还有一个小问题,js里面普通函数和构造函数形式上貌似没有啥太大区别(首字母大写不是必须的,但是通常都把构造函数的首字母大写)。new这个关键字到底做了什么东西。

比方

var Kimy = new Student(); 

new 做了三件事情

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1、定义了一个空对象

2、设置其原型

3、初始化对象

这样就能理解为什么Kimy.__proto__指向的是Student.prototype了(同一个引用),原来就是new在起着关键的作用!

以上就是本文的全部内容,希望大家能够喜欢。

Javascript 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 #Javascript
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python 通过URL打开图片实例详解
2017/06/01 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python 创建一维的0向量实例
2019/12/02 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
自主招生自荐信格式
2013/12/03 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
颐和园导游词400字
2015/01/30 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
党小组考察意见
2015/06/02 职场文书
亮剑精神观后感
2015/06/05 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android