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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
微信小程序实现日历小功能
Nov 18 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学习笔记之二 php入门知识
2011/01/12 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php图片缩放实现方法
2014/02/20 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
python提取内容关键词的方法
2015/03/16 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python如何判断IP地址合法性
2020/04/05 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
优秀员工评语
2014/02/10 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
六查六看六改心得体会
2014/10/14 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
爱心捐款感谢信
2015/01/20 职场文书
毕业设计工作总结
2015/08/14 职场文书
学习委员竞选稿
2015/11/20 职场文书