JavaScript高阶 day-02

news2024/12/23 18:05:36

目录

一.构造函数

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 通过原型为数组扩展内置方法


一.构造函数

定义:通过 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();
 p2.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/2077165.html

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

相关文章

正高职称评审中专利与论文的权重比较

正高职称评审中&#xff0c;专利和论文的权重因地区、行业、单位以及具体评审政策的不同而有所差异。 一般来说&#xff0c;专利分不同类型&#xff0c;包括发明专利、实用新型专利和外观设计专利。发明专利申请授权过程中要进行实质审查&#xff0c;含金量最高&#xff0c;在…

通过ClearScript V8在.NET中执行复杂JavaScript逻辑

介绍 在现代网络开发中&#xff0c;爬虫技术已成为数据采集和分析的核心手段之一。通常&#xff0c;爬虫程序需要处理复杂的JavaScript逻辑&#xff0c;尤其是在面对动态加载的网页时。这时&#xff0c;传统的HTTP请求和HTML解析已经无法满足需求。为了应对这些挑战&#xff0…

高清无水印,2024年最佳免费录屏工具集合

如果你喜欢记录游戏的精彩瞬间&#xff0c;那班迪录屏你一定不陌生吧&#xff0c;它是一款主攻游戏录制的工具&#xff0c;这次我们一起来探索下除了它之外还有什么工具能实现我们电脑录屏操作呢。 1.福昕REC大师 链接&#xff1a;www.foxitsoftware.cn/REC/ 这个软件我推荐…

深度学习——分布式训练

目录 1. 前言2.分布式训练的分类3.不并行&#xff08;单机单卡&#xff09;4. 数据并行 DP和DDP4.1 异同点4.2 原理4.3 DP 实现&#xff08;单机多卡&#xff09;4.4 DDP 实现&#xff08;单机多卡&#xff0c;多机分布式&#xff09;4.4.1DDP 基本概念4.4.2 DDP之单机多卡4.4.…

知识付费小程序搭建

近期&#xff0c;我的一位教育培训机构的朋友巧妙运用了一款知识付费小程序&#xff0c;成功解锁了教育创新的新篇章。这个月&#xff0c;他的教学平台迎来了显著的增长&#xff0c;新增生源高达200人&#xff0c;这一成就令人瞩目。他巧妙地将线上教学的便捷性与线下互动的沉浸…

一个php快速项目搭建框架源码,带一键CURD等功能

介绍&#xff1a; 框架易于功能扩展&#xff0c;代码维护&#xff0c;方便二次开发&#xff0c;帮助开发者简单高效降低二次开发成本&#xff0c;满足专注业务深度开发的需求。 百度网盘下载 图片&#xff1a;

汉服文化平台网站

您好&#xff01;本篇论文将详细介绍汉服文化平台网站的设计与实现&#xff0c;该项目基于Java语言&#xff0c;采用SSM框架&#xff0c;结合MySQL数据库完成开发。如果您对汉服文化或本项目有任何兴趣或疑问&#xff0c;欢迎随时与我联系。 开发语言 Java 数据库 MySQL 技…

C#多项目统一版本号

问题 如果C#项目有个项目组合成&#xff0c;每次升级都需要修改csproj里面的版本号&#xff0c;处理起来比较麻烦 案例 common.targets 有如下两个项目&#xff0c;Main引用ClassLibrary1 namespace ClassLibrary1 {public class Class1{public void SayHello(){Console.W…

BSV区块链发布Golang软件开发工具包

​​发表时间&#xff1a;2024年8月8日 BSV区块链团队正式发布为Golang语言开发的软件开发工具包&#xff08;SDK&#xff09;。这个Golang SDK&#xff08;以下称Go SDK&#xff09;为开发可扩展的BSV区块链应用提供了一套升级且标准化的接口和工具。 请在GitHub上访问Go SDK…

1Panel应用推荐:MeterSphere开源持续测试工具

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用&#xff0c;1Panel特别开通应用商店&am…

【protobuf入门学习(一)】 —— protobuf安装教程

目录 &#xff08;一&#xff09;protobuf 的基本介绍 1. 序列化概念 2. ProtoBuf 是什么 3. ProtoBuf 的使用特点 &#xff08;二&#xff09;protobuf 安装 2.1 protobuf ——Windows 1. 下载ProtoBuf编译器 2. 配置环境变量 3. 检查是否配置成功 2.2 protobuf —— L…

【数字时序】时钟树延迟偏差——CPPR adjustment

接上一篇文章Innovus的时序报告解读&#xff0c;新版的貌似多了一些信息&#xff0c;比如CPPR Adjustment和Derate。不太清楚这两个是什么概念&#xff0c;搜索之后转载2篇后端工程师的博客如下&#xff1a; 搜到个这个网站好像有很多后端相关的知识点分享一哈&#xff1a; Co…

Linux文件编程(进阶)

文章目录 Linux文件编程文件操作的基本元素&#xff08;文件在磁盘上的操作&#xff09;软链接和硬链接原理文件系统范围创建方式示例&#xff1a;在终端使用指令创建软硬链接软链接硬链接 删除源文件影响软链接和硬链接实现的具体原理link函数unlink函数代码示例&#xff1a;使…

【链栈的实现】--------本质为不带头结点的 头插法建立起来的单链表

1.链栈的基本属性与特征&#xff1a; 链栈是运算受限的单链表&#xff0c;只能在链表头部进行操作 2.链栈的相关基础操作汇总 初始化操作&#xff1a;操作结果:构造一个空栈 S。 InitStack(LinkStack *s)判定S是否为空栈&#xff1a; 初始条件:栈S 已存在 操作结果:若栈S为…

【Linux】全面解析进程:优先级、环境变量与地址空间

文章目录 1. 进程概念1.1 什么叫做进程&#xff1f;1.2 进程和程序的区别 2. linux下的进程2.1 task_struct 包含哪些内容2.2 访问&#xff08;查看&#xff09;进程信息2.3 通过系统调用获取进程标示符2.4 通过系统调用创建进程2.5 进程状态2.6 如何查看进程状态&#xff08;指…

鸿蒙开发5.0【基于CameraKit,通过avrecorder进行录像】

1 场景描述 录像是相机应用的最重要功能之一&#xff0c;录像是循环帧的捕获。本文通过CameraKit自定义相机并通过avrecorder进行录像。 2 效果图 3 自定义相机录像流程图 4 方案描述 4.1 整体描述&#xff1a; 总体可分为:1、相机输入&#xff0c;2、同时输出预览流录像流…

【Python机器学习】NLP分词——利用分词器构建词汇表(三)——度量词袋之间的重合度

如果能够度量两个向量词袋之间的重合度&#xff0c;就可以很好地估计他们所用词的相似程度&#xff0c;而这也是它们语义上重合度的一个很好的估计。因此&#xff0c;下面用点积来估计一些新句子和原始的Jefferson句子之间的词袋向量重合度&#xff1a; import pandas as pdse…

win10配置安装apache服务

Welcome! - The Apache HTTP Server Project

redisson watchdog 原理

目录 1、使用2、加锁解析1、getLock2、tryLock2.1、当ttl为null时为加锁成功&#xff0c;返回true,否则继续往下执行&#xff0c;判断是否超过等待时间&#xff0c;当前时间减去获取锁前时间就是获取锁花费时间。2.2、tryAcquire(leaseTime, unit, threadId)2.3 、renewExpirat…

黑悟空!一区预定!原创首发!SLWCHOA-Transformer-LSTM混合改进策略的黑猩猩优化算法多变量时间序列预测

黑悟空&#xff01;一区预定&#xff01;原创首发&#xff01;SLWCHOA-Transformer-LSTM混合改进策略的黑猩猩优化算法多变量时间序列预测 目录 黑悟空&#xff01;一区预定&#xff01;原创首发&#xff01;SLWCHOA-Transformer-LSTM混合改进策略的黑猩猩优化算法多变量时间序…