理解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制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
个人小程序接入支付解决方案
May 23 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
原生JS实现留言板
Mar 26 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python executemany的使用及注意事项
2017/03/13 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
JPA的特点
2014/10/25 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
车工岗位职责
2013/11/26 职场文书
教师个人自我鉴定
2014/02/08 职场文书
高级销售求职信
2014/02/21 职场文书
商场促销活动总结
2014/07/10 职场文书
怎样写辞职信
2015/02/27 职场文书
cypress测试本地web应用
2022/06/01 Javascript