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 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 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如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
xml转json的js代码
2012/08/28 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
跟老齐学Python之for循环语句
2014/10/02 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
自考生自我鉴定范文
2013/10/01 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
英语教师求职信
2014/06/16 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python