理解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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery选择器全面总结
Jan 06 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue中如何去掉空格的方法实现
Nov 09 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中把对象转换为关联数组代码分享
2015/04/09 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js Calender控件使用详解
2015/01/05 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue 项目地址去掉 #的方法
2018/10/20 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python3 拼接字符串的7种方法
2018/09/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
消防应急演练方案
2014/02/12 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
党支部鉴定意见
2015/06/02 职场文书
在职证明范本
2015/06/15 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
德劲DE1105机评
2022/04/05 无线电
MySQL 逻辑备份 into outfile
2022/05/15 MySQL