理解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之对系统的toFixed()方法的修正
May 08 Javascript
iis6+javascript Add an Extension File
Jun 13 Javascript
javascript实现完美拖拽效果
May 06 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
jQuery实现文档树效果
Feb 20 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
js canvas实现俄罗斯方块
Oct 11 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php对数组排序的简单实例
2013/12/25 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php session的锁和并发
2016/01/22 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python多进程fork()函数详解
2019/02/22 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
初婚初育证明
2014/01/14 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
物理课外活动总结
2014/08/27 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
安全承诺书
2015/01/19 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
nginx搭建NFS网络文件系统
2022/04/14 Servers
python缺失值填充方法示例代码
2022/12/24 Python