JS原型对象操作实例分析


Posted in Javascript onJune 06, 2020

本文实例讲述了JS原型对象操作。分享给大家供大家参考,具体如下:

万物皆对象,函数也同样是对象,是特殊的函数对象

function fn() {}
let a = new fn();
let b = new Function()

console.log(typeof a);  // object 
console.log(typeof b);  // function

打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享的属性和方法。
换句话说,prototype对象包含了函数所有的共享属性和方法。

function fn() {}
fn.prototype.a = 18;
fn.prototype.b = "b";
fn.prototype.test = function() {
 console.log(123);  
}
var r = new fn();
console.log(r.a);  // 18

我们直接在函数fn的原型属性上加了两个属性和一个方法,实例化后便可以访问原型中的值。

  • 原型对象有一个constructor属性,它也是一个指针,它指向原来的函数,也就是说,fn.prototype.constructor == fn。
  • 所有的实例都有这个原型对象,因此实例可以访问到原型对象中的属性和方法。

JS原型对象操作实例分析

那么实例怎么搜索变量或者方法的值呢?首先,函数实例会在函数本身上去寻找该变量,如果没有找到,会在原型对象上寻找变量。

function fn() {}
fn.prototype.a = 18;
fn.prototype.b = "b";
fn.prototype.test = function() {
 console.log(123);
}
var a = new fn();
var b = new fn();
b.a = 20
console.log(b.a);  // 20
console.log(a.a);  // 18

创建了两个实例,在b实例上手动添加了一个a属性,在fn的原型对象上也有一个a属性,那么对于b实例会优先访问本身的属性而不是原型上的属性。

参考内容:JavaScript高级程序设计

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
JS中的继承操作实例总结
Jun 06 #Javascript
ES6 async、await的基本使用方法示例
Jun 06 #Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 #Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 #Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
You might like
php导出CSV抽象类实例
2014/09/24 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
vue元素实现动画过渡效果
2017/07/01 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python 对输入的数字进行排序的方法
2018/06/23 Python
django如何连接已存在数据的数据库
2018/08/14 Python
详解Python字符串切片
2019/05/20 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
大学生学习新党章思想汇报
2014/10/25 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
python 中的@运算符使用
2021/05/26 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs