理解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按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
原生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自定义加密与解密程序实例
2014/12/31 PHP
php浏览历史记录的方法
2015/03/10 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
Python与R语言的简要对比
2017/11/14 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python交互环境下实现输入代码
2018/06/22 Python
创建Django项目图文实例详解
2019/06/06 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
毕业生文员求职信
2013/11/03 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015团员个人年度总结
2015/11/24 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
python process模块的使用简介
2021/05/14 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android