理解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 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
jQuery实现简单全选框
Sep 13 jQuery
原生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 whois查询API制作方法
2011/06/23 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python字典的常用方法总结
2019/07/31 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
使用python远程操作linux过程解析
2019/12/04 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
材料采购员岗位职责
2013/12/17 职场文书
优秀员工演讲稿
2014/05/19 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2015年工会工作总结
2015/03/30 职场文书
聚会通知怎么写
2015/04/23 职场文书
保险公司增员口号
2015/12/25 职场文书
导游词之太湖
2019/10/08 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis