理解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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
Bootstrap表单布局
Jul 19 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
JavaScript find()方法及返回数据实例
Apr 30 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
理解JS事件循环
2016/01/07 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python程序退出方式小结
2017/12/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
导游欢送词
2015/01/31 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS