iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >关于JavaScript 的对象的介绍是怎样的
  • 731
分享到

关于JavaScript 的对象的介绍是怎样的

2024-04-02 19:04:59 731人浏览 八月长安
摘要

本篇文章为大家展示了关于javascript 的对象的介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1. 对象方法 & this方法只是保存函数

本篇文章为大家展示了关于javascript 的对象的介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

1. 对象方法 & this

方法只是保存函数值的属性。

简单对象方法

let rabbit = {}; rabbit.speak = function(line) {     console.log("小兔子说: "+ line ); }; rabbit.speak("我还活着。")

输出:

T小兔子说: 我还活着。

对象方法 & this

当一个函数作为方法被调用时,对象会将函数作为属性并立即调用,就像在object.method()中一样,其主体中的特殊变量this将指向被调用的对象。

function speak(line) {   console.log(this.type + "小兔子说:" + line) }; let whiteRabbit = {type: "白色", speak: speak}  whiteRabbit.speak("噢,我真可爱!")

输出:

白色小兔子说:噢,我真可爱!

apply & call

function speak(line) {   console.log(`${this.type}的小兔子说:${line}` ); }; let whiteRabbit = {type: "白色", speak: speak};  speak.apply(whiteRabbit, ["你这个小坏蛋!"]); speak.call({type: "黑色"}, "嘿嘿,我不坏,你不爱!");
白色的小兔子说:你这个小坏蛋! 黑色的小兔子说:嘿嘿,我不坏,你不爱!

2.Prototype(原型)

  • 几乎所有的对象都有一个prototype

  • prototype是另一个用作属性的备用源的对象

  • 当一个对象访问自身没有属性时,它会从它的prototype搜索该属性,如果没有找到就继续从它的prototype的prototype查找,依此类推,直到  null 为止。

空对象的原型

原型链最终的指向是Object的prototype, 而Object中的__proto__是null

let empty = {}; console.log(empty.toString); console.log(empty.toString());

输出:

[Function: toString] [object Object]

其他对象(数组、函数等等)的默认属性

  • 许多对象没有直接将Object.prototype作为自己的原型,但有自己的默认属性

  • 从Function.prototype派生的函数和从Array.prototype派生的数组

console.log(Object.getPrototypeOf(isNaN) ==             Function.prototype); console.log(Object.getPrototypeOf([]) == Array.prototype);

输出:

true true
  • Object.create 创建具有特定原型的对象

  • protoRabbit充当所有兔子共享的属性的容器

单个兔子对象(如杀手兔子)包含仅适用于自身的属性(在本例中为type),并从其原型派生共享属性

let protoRabbit = {   speak: function (line) {     console.log(`${this.type}兔子说:${line}` );   } }  let killerRabbit = Object.create(protoRabbit) killerRabbit.type = '杀手' killerRabbit.speak('准备受死吧!')

输出:

杀手兔子说:准备受死吧!

3.构造函数

— 构造函数原型

  • 创建从某个共享原型派生的对象的更方便的方法是使用构造函数

  • 在 JavaScript 中,调用前面带有new关键字的函数会将其视为构造函数

  • 构造函数将其this变量绑定到一个新对象,除非它显式返回另一个对象值,否则此新对象将从调用中返回

  • 用new创建的对象被称为是其构造函数的实例

  • 约定将构造函数的名称大写,以便于与其他函数区分开

function Rabbit(type) {     this.type = type; }  let killerRabbit = new Rabbit("killer"); let blackRabbit = new Rabbit("black"); console.log(blackRabbit.type);

输出:

black

— 默认情况下,构造函数具有Object.prototype

  • 构造函数(实际上是所有函数)会自动获取一个名为prototype的属性,默认情况下,该属性包含一个从Object.prototype派生的普通空对象

  • 使用此构造函数创建的每个实例都将此对象作为其原型

function Rabbit(type) {   this.type = type; }  let blackRabbit = new Rabbit("黑色"); Rabbit.prototype.speak = function(line) {   console.log(`${this.type}的兔子说:${line}` ); }; blackRabbit.speak("Boom...一波王炸!");

输出:

黑色的兔子说:Boom...一波王炸!

4. 重写派生属性

— 相同的原型名称

  • 如果原型中有同名的属性,则不会更改此属性

  • 该属性被添加到对象本身

function Rabbit(type) {     this.type = type; } let blackRabbit = new Rabbit("black"); let killerRabbit = new Rabbit("killer");  Rabbit.prototype.teeth = "small"; console.log(killerRabbit.teeth); // small killerRabbit.teeth = "long, sharp, and bloody"; console.log(killerRabbit.teeth); // long, sharp, and bloody console.log(blackRabbit.teeth); // small console.log(Rabbit.prototype.teeth); // small

下面  console.log(blackRabbit.teeth)的结果是small,因为blackRabbit对象不具有teeth属性,它继承自Rabbit对象自己的teeth属性,值为  small。

5. 原型的干扰

— 可枚举与不可枚举

let map = {}  function storePhi(event, phi) {   map[event] = phi }  storePhi('pizza', 0.069) storePhi('touched tree', -0.081)  Object.prototype.nonsense = 'hi'  for(let name in map) {   console.log(name) }  console.log('nonsense' in map) console.log('toString' in map)

输出结果:

pizza touched tree nonsense true true

toString没有出现在for/in循环中,但是in运算符中返回true,这是因为 js 区分可枚举属性和不可枚举属性。

我们通过简单分配创建的所有属性都是可枚举的,Object.prototype中的标准属性都是不可改变的,这就是为什么它们不出现在这样的for/in循环中的原因。

let map = {}; function storePhi(event, phi) {     map[event] = phi; }  storePhi("pizza", 0.069); storePhi("touched tree", -0.081);  Object.defineProperty(Object.prototype, "hiddenNonsense",                 {enumerable: false, value: "hi"})  for (var name in map) {     console.log(name) }  console.log(map.hiddenNonsense)

输出:

pizza touched tree hi

通过使用Object.defineproperty函数可以定义自己的不可枚举属性,该函数允许我们控制要创建的属性的类型,在该示例中,hiddenNonsense在  map 中,但在 for...in 中不会显示。

— hasOwnProperty vs in 操作符

const map = {} console.log("toString" in map) console.log(map.hasOwnProperty("toString"))

输出:

true false

hasOwnProperty方法告诉我们对象本身是否具有该属性,而无需查看其原型,这通常是比in运算符提供给我们的信息更有用的信息。

因此,如果你对基础对象原型感到困惑时,建议你可以这样写for/in循环:

for (var name in map) {     if (map.hasOwnProperty(name)) {         // ... this is an own property     } }

6.无原型对象

Object.create函数使我们能够创建具有特定原型的对象。我们还可以传递null作为原型,用来创建不带原型的新对象。

因此,我们不再需要hasOwnProperty,因为对象拥有的所有属性都是它自己的属性。现在,无论人们对Object.prototype做了什么,我们都可以安全地使用for/in循环

var map = Object.create(null); map["pizza"] = 0.069; console.log("toString" in map); // false console.log("pizza" in map); // true

上述内容就是关于JavaScript 的对象的介绍是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网node.js频道。

--结束END--

本文标题: 关于JavaScript 的对象的介绍是怎样的

本文链接: https://www.lsjlt.com/news/82367.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于JavaScript 的对象的介绍是怎样的
    本篇文章为大家展示了关于JavaScript 的对象的介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1. 对象方法 & this方法只是保存函数...
    99+
    2022-10-19
  • java中关于对象的详细介绍
    一、对象的创建步骤:(1)声名对象变量:对象变量的声明并没有创建对象,系统只是为该改变量分配一个引用空间。(2)对象的实例化:为对象分配空间,执行new运算符后的构造方法完成对象的初始化,并返回该对象的引用。过程:首先为对象分配内存空间,并...
    99+
    2014-08-23
    java入门 java 对象
  • 关于python的对象序列化介绍
    对象:是抽象的概念 如列表 元组 字典 集合 皆为对象 序列化:一种方法。目的:把对象存储在磁盘上(即,将对象转换为字节数据/字符数据)。 这一过程我们借助序列化这一方法实现。 为什...
    99+
    2022-11-13
  • 关于java中类和对象的详细介绍
    类和对象对象我们知道,代表现实世界中可以明确标识的一个实体(万物皆对象),每个对象都有自己独特的标识、状态和行为。类是具有相似特征和行为的事物的统称。使用一个通用类来定义同一类型的对象。 类是一个模板 、蓝本或者说是合约 , 用来定义对象的...
    99+
    2015-06-07
    java入门 java 对象
  • JavaScript语法介绍是怎样的
    本篇文章给大家分享的是有关JavaScript语法介绍是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScript 是一个 脚本...
    99+
    2022-10-19
  • javascript Number 与 Math对象的介绍
    目录一、javascript 中 Number二、Javascript中Math对象一、javascript 中 Number javascript 中,数值类型属于原始类型。 除了...
    99+
    2022-11-12
  • JavaScript中的内置对象介绍
    一、对象的概念 对象是一种特殊的数据类型(object)。拥有一系列的属性和方法。分为内置对象和自定义对象。 二、String对象 String对象用来支持对于字符串的处理。 1、属...
    99+
    2022-11-13
  • HTML5中对body是怎样介绍的
    HTML5中对body是怎样介绍的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 body元素就是就是html文...
    99+
    2022-10-19
  • 关于CentOS配置ssh系统技能介绍是怎样的
    这篇文章给大家介绍关于CentOS配置ssh系统技能介绍是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。由于越来越多的人使用CentOS操作系统,而且CentOS配置ssh已被广泛运用,但是也在不断的更新。存在着...
    99+
    2023-06-16
  • JavaScript内存管理介绍是怎样的
    本篇文章为大家展示了JavaScript内存管理介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。大多数时候,我们在不了解有关内存管理的知识下也只开发,因为...
    99+
    2022-10-19
  • Monyog的介绍是怎样的
    本篇文章为大家展示了Monyog的介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1、工具强大可以直接定位sql语句在做什么事情;Mysql日志MONyo...
    99+
    2022-10-18
  • JavaScript对象符号JSON的简介以及用法是怎样的
    本篇文章给大家分享的是有关JavaScript对象符号JSON的简介是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 介绍一段...
    99+
    2022-10-19
  • 关于Rocky Linux的相关介绍
    这篇文章主要介绍了关于Rocky Linux的相关介绍,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。Rocky Linux是一个社区企业操作系统,其下游合作伙伴已改变方向,旨在与美国顶级企业Linux发行版实现100%错...
    99+
    2023-06-08
  • Ajax四种元素的关系介绍是怎样的
    这篇文章将为大家详细讲解有关Ajax四种元素的关系介绍是怎样的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 通过使用Java...
    99+
    2022-10-19
  • JavaScript中的Array对象排序方法介绍
    这篇文章主要介绍“JavaScript中的Array对象排序方法介绍”,在日常操作中,相信很多人在JavaScript中的Array对象排序方法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • MySQL explain的介绍是怎样的
    这期内容当中小编将会给大家带来有关MySQL explain的介绍是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。MySQL explain 详解通过 explai...
    99+
    2022-10-18
  • 关于H3CNA认证的介绍
    关于H3CNA认证的介绍 总有很多人在我QQ上问关于H3CNA认证的事,其实这个证只是针对H3C网络学院的一个助理工程师认证,可以直接考H3CNE的,H3CNA认证一般情况下不用考。H3CNA认证主要定位于中小企业网络基本配置操作和设备维护...
    99+
    2023-01-31
    H3CNA
  • JavaScript中的Map、WeakMap、Set和WeakSet介绍是怎样的
    今天就跟大家聊聊有关JavaScript中的Map、WeakMap、Set和WeakSet介绍是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。...
    99+
    2022-10-19
  • Javascript 高级手势使用的介绍是怎样的
    这期内容当中小编将会给大家带来有关Javascript 高级手势使用的介绍是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。  在IE10中新加入的对高级用...
    99+
    2022-10-19
  • JavaScript中null的介绍以及用法是怎样的
    本篇文章给大家分享的是有关JavaScript中null的介绍以及用法是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScrip...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作