02- javascript 高阶-构造函数(知识点)呀

news2024/12/23 10:17:55

目录

1.构造函数

1.1 JS构造函数的实例成员和静态成员

1.1.1实例成员

1.1.2静态成员

1.2构造函数原型prototype

1.3对象原型

1.4 constructor构造函数

1.5原型链

1.6构造函数实例和原型对象三角关系

1.7原型链和成员的查找机制

1.7.1 Object.prototype.hasOwnProperty(prop)方法

1.7.2 Object.prototype.isPrototypeOf(Object)方法

1.8原型对象中this指向

1.9 通过原型为数组扩展内置方法


1.构造函数

定义:通过 new 函数名, 来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要功能为初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写(规范)。

1.1 JS构造函数的实例成员和静态成员

1.1.1实例成员

 实例成员就是在构造函数内部添加的成员,只能由实例化的对象来访问

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name+'在奔跑');
    }
}
​
var p1 = new Person('张三', 20);  // 创建实例化对象
console.log(p1.name);  // 用实例化对象访问name属性
p1.run();  // 用实例化对象访问run方法
console.log(Person.name);  // 无法访问
1.1.2静态成员

 在构造函数本身上添加的成员,只能由构造函数本身来访问

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name+'在奔跑');
    }
}
var p2 = new Person('李四', 24);  // 创建实例化对象
Person.sex = '男';  // 创建静态成员
console.log(Person.sex);  // '男'
console.log(p2.sex);  // undefined

1.2构造函数原型prototype

function Person(name) {
    this.mName = name;
    this.sayName = function() {
        return this.mName;
    };
}
​
var p1 = new Person('张三');
var p2 = new Person('李四');

思考:构造函数方法很好用,但是存在浪费内存的问题。

如何节约内存空间呢?

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定,每一个构造函数都有一个prototype 属性

  • prototype是一个对象属性,其属性值为对象,称为原型对象

  • 可以通过prototype来添加新的属性和方法,此时所有该构造函数创建的实例对象都会具有这些属性和方法

  • 由该构造函数创建的对象会默认链接到该属性上

语法:

  • 构造函数.prototype.属性名 = 值;

  • 构造函数.prototype.方法名 = function(){定义方法体};

我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

function Person(name) {
    this.mName = name;
    this.sayName = function() {
        return this.mName;
    };
}
Person.prototype.sayName = function() {
    console.log(this.mName);
    return this.mName;
}
var p1 = new Person('张三');
var p2 = new Person('李四');
 p1.sayName();
 p1.sayName();

总结:

  • 每一个构造函数都有一个prototype 属性,其属性值为对象,称为原型对象。

  • 原型的作用是什么? 共享方法,节约内存。

1.3对象原型

每一个对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象,之所以实例化对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的。
__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype。

1.4 constructor构造函数

对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

1.5原型链

当访问一个对象的某个属性或方法时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。

简单的回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

1.6构造函数实例和原型对象三角关系

1.构造函数的prototype属性是构造函数原型对象,也成为原型
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数

1.7原型链和成员的查找机制

当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)。
如果还没有就查找原型对象的原型(Object的原型对象)。
依此类推一直找到 Object 为止(null)。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。
1.7.1 Object.prototype.hasOwnProperty(prop)方法

可以判断一个属性定义在对象本身而不是继承原型链的方法,主要用于判断某个对象中是否有某个属性,返回值为布尔值。

1.7.2 Object.prototype.isPrototypeOf(Object)方法

isPrototypeOf方法接收一个对象,用来判断当前对象是否在传入的参数对象的原型链上,返回一个布尔值。

1.8原型对象中this指向

构造函数中的this和原型对象的this,都指向我们new出来的实例对象

 function Person(name) {
            this.mName = name;
 };
var that;
Person.prototype.sayName = function() {
    console.log('我是大咖');
    that = this;
}
var p1 = new Person('张三');
// 1. 在构造函数中,里面this指向的是实例对象
p1.sayName();
console.log(that);
console.log(p1);
console.log(that === p1); //true
// 2.原型对象函数里面的this指向的是实例对象

1.9 通过原型为数组扩展内置方法

 Array.prototype.sum = function() {
   var sum = 0;
   for (var i = 0; i < this.length; i++) {
   sum += this[i];
   }
   return sum;
 };
 //此时数组对象中已经存在sum()方法了  可以始终 数组.sum()进行数据的求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2076934.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WEB渗透Win提权篇-提权工具合集

提权工具合集包&#xff1a; 夸克网盘分享 往期文章 WEB渗透Win提权篇-RDP&Firewall-CSDN博客 WEB渗透Win提权篇-MSSQL-CSDN博客 WEB渗透Win提权篇-MYSQL-udf-CSDN博客 WEB渗透Win提权篇-AccountSpoofing-CSDN博客 WEB渗透Win提权篇-弱权限提权-CSDN博客 Tools合集 工…

UVa1670/LA5920 Kingdom Roadmap

UVa1670/LA5920 Kingdom Roadmap 题目链接题意分析AC 代码 题目链接 本题是2011年icpc欧洲区域赛东北欧赛区的K题 题意 输入一个n&#xff08;n≤100000&#xff09;个结点的树&#xff0c;添加尽量少的边&#xff0c;使得任意删除一条边之后图仍然连通。如下图所示&#xff0…

如果是你,你会背叛师门吗?看了凌晨一点杭州隧道里睡满的外卖员,我觉得李佳琦被骂一点也不冤——早读(逆天打工人爬取热门微信文章解读)

如果是你&#xff0c;你会背叛师门吗&#xff1f;&#xff1f; 引言Python 代码第一篇 洞见 看了凌晨一点杭州隧道里睡满的外卖员&#xff0c;我觉得李佳琦被骂一点也不冤第二篇 股市风云结尾 (先不论人品如何&#xff0c;这个问题就有点类似董宇辉跟新东方&#xff0c;大伙且看…

Java学习第一天

Java介绍&#xff1a; Java是一种高级编程语言&#xff1b;由sun公司研发&#xff0c;之后被Oracle公司收购&#xff1b;Java之父是詹姆斯.高斯林&#xff1b;Java什么都能做但主要用于企业互联网系统的开发&#xff1b;包括JavaSE&#xff08;标准版&#xff09;、JavaEE&…

C程序设计——表达式的值0

表达式 表达式是一组序列&#xff0c;由操作符或操作数组成。 表达式的值 C语言中&#xff0c;所有的表达式&#xff0c;都是有值的&#xff0c;所以本节专门讲讲表达式的值。 算数表达式 算数表达式的值&#xff0c;就是算数运算的结果&#xff0c;比如表达式 1 1的值就…

Threejs三要素及demo

本文目录 前言一、threejs三要素1.1 场景Scene1.2 相机Camera1.3 渲染器Renderer1.4 项目构建准备 二、安装Threejs2.1 编写代码 前言 Three.js是一个在 MIT 许可下的 JavaScript 库&#xff0c;它在 WebGL 之上运行。这个库的目标就是简化处理3D内容的过程。它是一个WebGL引擎…

【Linux】第一次使用linux向gitee上提交代码

1.首先要在gitee上新建一个仓库 2.然后&#xff0c;复制https的仓库链接 3. 三板斧 第一斧 git add . 4.三板斧 第二斧 git commit -m ‘日志’ 5.三板斧 第三斧 git push

QQ官方BOT 机器人Python实现群聊本地图片【base64编码】上传及其发送

参考&#xff1a;实现群聊本地图片【base64编码】上传及其发送 by SlieFamily 拉取请求 #199 腾讯连接/Botpy (github.com) 首先找到api.py&#xff0c;如果你是通过pip安装的botpy。找到包对应的地址&#xff0c;如果是clone的&#xff0c;也直接找到api.py。 打开后&#xff…

io进程----文件io

目录 一丶概念 二丶特点 三丶函数 1.打开文件 open 2.关闭文件 close 3.读取文件 read 4.写入文件 write 5.文件定位操作 标准IO和文件IO区别 四丶获取文件属性 1.stat函数 2.获取文件类型 五丶目录操作 一丶概念 在posix(可移植操作系统接口)中定义的一组输入输出…

STC89C52 定时器浅谈

文章目录 1、定时器1.1 定时器简介1.2 定时器构成1.2.1 系统时钟1.2.2 计数单元1.2.3 中断系统 1.2 定时器0/1的相关寄存器1.2.1 TMOD1.2.2 TCON 1.3 初始化定时器0 1、定时器 1.1 定时器简介 定时器&#xff0c;又称为计数器&#xff0c;是51单片机的内部资源&#xff0c;即…

16、CPU缓存架构

CPU缓存架构 CPU缓存架构详解CPU高速缓存概念CPU多核缓存架构CPU多核缓存架构缓存一致性问题分析 CPU缓存架构缓存一致性的解决方案缓存一致性协议实现原理总线窥探工作原理窥探协议类型 缓存一致性协议MESI协议 伪共享的问题linux下查看Cache Line大小避免伪共享方案 CPU缓存架…

netty编程之实现HTTP服务

写在前面 http是应用层协议&#xff0c;是我们日常开发中直接用到最多的协议了。本文来看下通过netty如何实现。 1&#xff1a;程序 netty不仅仅提供了String相关的编解码器&#xff0c;还贴心的提供了http相关的编码器和解码器&#xff0c;直接拿来用就行了&#xff0c;所以…

【3.3】贪心算法-解分发糖果

一、题目 老师想给孩子们分发糖果&#xff0c;有N 个孩子站成了一条直线&#xff0c;老师会根据每个孩子的表现&#xff0c;预先给他们评分。 你需要按照以下要求&#xff0c;帮助老师给这些孩子分发糖果&#xff1a; 1&#xff09;每个孩子至少分配到1 个糖果。 2&#xff…

apache经典模型和nginx参数配置

Apache 几个经典的 Web 服务端 ①Apache prefork 模型 ● 预派生模式&#xff0c;有一个主控制进程&#xff0c;然后生成多个子进程&#xff0c;使用select模型&#xff0c;最大并发 1024 ● 每个子进程有一个独立的线程响应用户请求 ● 相对比较占用内存&#xf…

Cyberchef实用功能之-模拟沙箱的文件静态分析能力

本文将介绍如何使用cyberchef 提取文件的重要元数据的信息&#xff0c;根据自己的需求实现沙箱中的静态文件的分析能力。 在网络安全日常的运营&#xff0c;护网行动&#xff0c;重保活动的过程中&#xff0c;样本的分析是一个重要的过程&#xff0c;这些可疑或者恶意的样本的…

Beyond Compare忽略特定格式文本

1 问题背景&#xff1a; 文本对比时忽略某些文本。比如有些生成的文件需要做差异对比&#xff0c;除了内容有差异外&#xff0c;自动生成的ID也不同&#xff0c;想忽略这些ID。特别是文件内容比较多的时候。 如上图&#xff0c;其中UUID“*”的部分我想忽略。 方法&#xff1…

微信开放平台应用签名MD5

可以使用JS转换一下 一、在任一网页 右键 检查 打开调试 二、把字母转换成小写&#xff0c;去除&#xff08;:&#xff09; MD5 应用签名示例 "70:71:5F:CA:AE:E5:B1:01:30:11:8F".toLowerCase().replace(/:/g, "") 70715fcaaee5b10130118f 就是要填写…

我们为什么推出数据模型

调用接口之前&#xff0c;要写大量的字段校验代码&#xff1f; 需要关联读写多张表的数据&#xff0c;难以写出复杂的数据库语法&#xff1f; 不仅需要开发核心的业务逻辑&#xff0c;还需要加班搭建CMS和数据管理页面&#xff1f; 数据不止放在云开发&#xff0c;还需要查询…

ctfhub-web-基础认证

HTTP协议&#xff1a;什么是HTTP基本认证_网易订阅 https://zhuanlan.zhihu.com/p/64584734 弹框输入密码账号bp抓包&#xff0c;发现了Authorization&#xff1a;后面有一串BASE64的编码(输入的密码) 账号默认是admin&#xff0c;抓包后是basic 把抓到的包发送到爆破模块i…

MySql【约束】

约束 1.1 约束 是什么? 约束,即限制,就是通过设置约束,可以限制对数据表数据的插入,删除,更新 怎么做? 约束设置的语法,大部分是 create table 表名( 字段 数据类型(长度) 约束, 字段 数据类型(长度) 约束 ); 另外一种是建表后,使用alter语句修改表添加约束 1.1 数据类型 其实…