javascript(JS)高级进阶(二) 函数原型
函数的原型(prototype)
- 每个函数都有一个prototype属性,它默认指向一个Object 空对象(称为原型对象)
- 原型对象中有一个属性constructor,它指向函数对象
构造器属性
每个函数都有 "prototype"
属性,即使我们没有提供它。
默认的 "prototype"
是一个只有属性 constructor
的对象,属性 constructor
指向函数自身。
像这样:
function Rabbit() {}/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/
我们可以检查一下:
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }alert( Rabbit.prototype.constructor == Rabbit ); // true
通常,如果我们什么都不做,constructor
属性可以通过 [[Prototype]]
给所有 rabbits 使用:
function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}alert(rabbit.constructor == Rabbit); // true (from prototype)
我们可以使用 constructor
属性来创建一个新对象,该对象使用与现有对象相同的构造器。
像这样:
function Rabbit(name) {this.name = name;alert(name);
}let rabbit = new Rabbit("White Rabbit");let rabbit2 = new rabbit.constructor("Black Rabbit");
当我们有一个对象,但不知道它使用了哪个构造器(例如它来自第三方库),并且我们需要创建另一个类似的对象时,用这种方法就很方便。
但是,关于 "constructor"
最重要的是……
……JavaScript 自身并不能确保正确的 "constructor"
函数值。
是的,它存在于函数的默认 "prototype"
中,但仅此而已。之后会发生什么 —— 完全取决于我们。
特别是,如果我们将整个默认 prototype 替换掉,那么其中就不会有 "constructor"
了。
例如:
function Rabbit() {}
Rabbit.prototype = {jumps: true
};let rabbit = new Rabbit();
alert(rabbit.constructor === Rabbit); // false
因此,为了确保正确的 "constructor"
,我们可以选择添加/删除属性到默认 "prototype"
,而不是将其整个覆盖:
function Rabbit() {}// 不要将 Rabbit.prototype 整个覆盖
// 可以向其中添加内容
Rabbit.prototype.jumps = true
// 默认的 Rabbit.prototype.constructor 被保留了下来
或者,也可以手动重新创建 constructor
属性:
Rabbit.prototype = {jumps: true,constructor: Rabbit
};// 这样的 constructor 也是正确的,因为我们手动添加了它
给原型对象添加属性(一般都是方法)
作用:它的所有实例对象自动拥有原型对象的方法
(实例对象可以访问到)
1、读取对象的属性值时,会自动到原型链中找
2、设置对象属性值时,不会查找原型链,如果当前对象没有此属性,直接添加此属性并设置值
3、方法一般定义在原型中,属性一般通过构造函数定义在对象本身上
显式原型 / 隐式原型
1、 每个函数function都有一个prototype,即显式原型(属性)
2、 每个实例对象都有一个____proto____ ,即称为隐式原型(属性)
3、 对象的隐式原型的值等于对应构造函数的显式原型的值
function Person(){this.dog = 'sss'}const p = new Person()console.log(p.__proto__); // { constructor: f Person() }console.log(Person.prototype); // { constructor: f Person() }
// 即 p实例对象的 隐式原型__proto__ == Person构造函数的 显示原型 prototype
4、总结:
- 函数的prototype属性:在定义函数时自动添加的,默认值一个空的Object对象
- 实例对象的
__proto__
属性:创建对象时自动添加的,默认值是其构造函数的prototype属性值
原型链
1、函数的显式原型指向的对象默认式空Object对象(object除外)
因为它的
__proto__
为nulllA instanceof B
查找时 如果B函数的显式原型对象在A对象的原型链接上,返回true,否则返回false
2、所有函数都是Function的实例(包含它自己)
3、Object的原型对象是原型链的尽头
javascript(JS)高级进阶(二) 函数原型相关推荐
- 从零开始学 Web 之 JS 高级(二)原型链,原型的继承
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
- JS高级讲解面向对象,原型,继承,闭包,正则表达式,让你彻底爱上前端(进阶二)...
JavaScript 高级 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 面向对象介绍 程序中面向对象的基本体现 ...
- JS高级进阶总结day01---面向对象编程介绍,new的工作原理以及构造函数,原型对象,实力函数三者之间的关系
02-面向对象编程 1.1-面向对象编程介绍 本小节知识点 1.理解什么是面向对象编程 面向对象不是一门技术,而是一种解决问题的思维方式 面向对象的本质是对面向过程的一种封装 2.理解什么是对象 对象 ...
- JS高级进阶总结day02---面向对象编程三大特征,原型链总结
今日学习路线 1.了解面向对象的三大特征 封装 将某个具体功能封装在对象中,只对外部暴露指定的接口,外界在使用的时候,只考虑接口怎么用,不用考虑内部怎么实现 继承 一个对象拥有其他对象的属性和方法 多 ...
- JS 高级(二)闭包、封装
目录 一.闭包 二.面向对象 1. 封装 一.闭包 全局变量和局部变量在使用的过程中都各有优点,但它们也都有着自己的不足之处.全局变量的好处是可以被重用,但是极易被污染(注意一般公司中禁止使用一切形式 ...
- 在HTML中使用javascript (js高级程序设计)
在HTML中使用javascript 刚开始入门的时候觉得关于应用以及在html中只用javascript很简单,不需要进行学习.我又开始重温了一下红宝书,觉得还是有必要进行学习的.这是一个笔记! s ...
- JS高级——深入剖析函数中的this指向问题
一.this到底指向什么呢? 我们先说一个最简单的,this在全局作用域下指向什么? 这个问题非常容易回答,在浏览器中测试就是指向window 但是,开发中很少直接在全局作用于下去使用this,通常都 ...
- JS高级进阶之ECMAScript 常见面试题
1.es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化 ECMAScript6,即ES6,是ECMAScript ...
- JS高级-自执行函数-垃圾回收机制及内存管理
自执行函数 函数分为两种: (1)一般函数 预解析后通过函数调用 函数名( ) 执行 (2)自执行函数 js引擎一遇到整个函数就立马执行 代码如下: js中的垃圾回收机制及内存管理 内存管理 (1)全 ...
最新文章
- 水木-搜索引擎技术版
- golang bytes.buffer 字节缓冲器 简介
- 【支付专区】之解析微信支付返回xml
- javaBean为什么要实现Serializable接口?
- 笔记-项目采购管理-合同类型-成本加激励费用合同
- Maven_Build_Resources
- DB2 SQLCODE=-803,SQLSTATE=23505,SQLERROR=1
- mysql 管理工具—phpmyadmin docker 版使用
- eoc机顶盒wifi服务器未响应,网络机顶盒中桌面配置服务器
- 数据库之战| 寻找你心中的数据库漫威英雄
- 微信群控,云控?云控系统工作原理
- ae 渲染 计算机内存不足,AE内存不足怎么办? After Effects内存不足【解决方法】...
- 5G网络中的缩略语与简写
- 基于C#制作一个音乐播放器
- 什么是Mysql的next-key、插入缓冲、二次写、自适应哈希索引和预读
- 湖南科技大学数据挖掘复习提纲
- 在线ps工具到底好不好用,这篇详细测评带你了解一下。
- Adobe XD下载以及探索
- 论文发表在计算机系统应用,团队成员唐秀雯同学在《计算机系统应用》发表学术论文...
- 互联网大厂中秋礼盒盘点:腾讯、阿里、字节跳动谁赢了?