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系列之Javascript基础篇
Jun 07 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
JS继承最简单的理解方式
Mar 31 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
stripos函数知识点实例分享
2019/02/11 PHP
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
python列表操作实例
2015/01/14 Python
Python批量转换文件编码格式
2015/05/17 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
使用python实现生成用户信息
2017/03/20 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Django操作session 的方法
2020/03/09 Python
如何查看python关键字
2021/01/17 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
市政管理求职信范文
2014/05/07 职场文书
项目建议书
2015/02/04 职场文书
英语投诉信范文
2015/07/03 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
DQL数据查询语句使用示例
2022/12/24 MySQL