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 相关文章推荐
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
js图片切换具体实现代码
Oct 13 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 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之第四天
2006/10/09 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php组合排序简单实现方法
2016/10/15 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JS变量及其作用域
2017/03/29 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python使用epoll实现服务端的方法
2018/10/16 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
对Python 语音识别框架详解
2018/12/24 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
党旗在我心中演讲稿
2014/09/15 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
公司搬迁通知
2015/04/20 职场文书
2015学校年度工作总结
2015/05/11 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
数学复习课教学反思
2016/02/18 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js