前端之JS对象

article/2025/9/21 1:28:01

前端之JS对象

  • 1.对象基础
    • 对象的定义
    • 子命名空间
    • 访问内容
      • 用点表示法 和 括号表示法
    • 设置对象成员
      • 更新数据
      • 创建新成员
    • "this"的含义
    • document 对象
  • 2.面向对象的程序(OOP)
    • 继承
    • 多态
    • 构建函数和对象
      • 构建函数的规范写法
    • 真正的构造函数
    • 创建对象的其他方式
    • Object()构造函数
      • create()方法
    • 小结
  • 3.对象原型
    • prototype 属性 -- 继承成员被定义的地方
    • __proto__查看原型链
    • constructor 属性
    • 修改原型
    • 常用模式
  • 继承
    • 原型式的继承
      • call()函数
        • 有参构造函数的继承
        • 无参构造函数的继承
    • 完美继承 核心*****************************************

对象使我们将一些信息安全地锁在了它们自己的包内,防止它们被损坏。

1.对象基础

对象是一个包含相关数据和方法的集合(也就是 变量, 函数)
对象的内容以花括号包裹, 以逗号隔开.

对象的定义

1.创建一个空对象:

var person = {};

2.创建一个含属性和方法的对象

属性名 : 值
方法名 : function() { 代码块; }
    var person = {name: ['Bob', 'Smith'],age: 32,gender: 'male',interests: ['music', 'skiing'],bio: function() {alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');},greeting: function() {alert('Hi! I\'m ' + this.name[0] + '.');}};

子命名空间

每一个对象都可以看成一个命名空间, 子命名空间就是对象内的对象.
访问子对象的属性和方法

    var person = {name: {first:'Bob',last: 'Smith'},//子命名空间age: 32,gender: 'male',interests: ['music', 'skiing'],bio: function() {alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');},greeting: function() {alert('Hi! I\'m ' + this.name[0] + '.');}};

访问内容

用点表示法 和 括号表示法

用点表示法来访问对象的属性和方法
1.对象的名字表现为一个命名空间(namespace),它必须写在第一位.

2.访问对象内部的属性或方法时,对象后面跟着一个点(.),紧接着要访问的属性或函数, 可以是数组属性的一个子元素
在这里插入图片描述

在这里插入图片描述

设置对象成员

更新数据

在这里插入图片描述

创建新成员

用点表示法 和 括号表示法 创建新成员.
在这里插入图片描述
括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值,还可以动态的去设置成员的名字
语法:

var myDataName = nameInput.value
var myDataValue = nameValue.valueperson[myDataName] = myDataValue

示范:

var myDataName = 'height'
var myDataValue = '1.75m'person[myDataName] = myDataValue

"this"的含义

关键字"this"指向了当前代码运行时的对象.
在这里插入图片描述

document 对象

每个页面在加载完毕后,会创建一个Document的实例, 名为document,它代表了整个页面的结构,内容和一些功能,比如页面的URL。同样的,这意味document有一些可用的方法和属性。

2.面向对象的程序(OOP

  • OOP: 在程序里,我们通过使用对象去构建现实世界的模型,把原本很难(或不可能)被使用的功能,简单化并提供出来,以供访问。
  • 对象可以包含相关的数据和代码

类( Class )并不是一个对象,它更像是一个定义对象特质的模板。对象是类的实例,类是对象的抽象(模板)。
在这里插入图片描述
当一个对象需要从类中创建出来时,类的构造函数就会运行来创建这个实例。
创建对象的过程叫实例化 – 实例对象被类实例化。

继承

继承: 基于某个类创建新的类.
如, 在人的基础上创建老师、学生等更具体的类。
继承的属性和方法是定义在 prototype 属性之上
在这里插入图片描述

多态

多态——这个高大上的词正是用来描述多个对象拥有实现共同方法的能力
多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果。

构建函数和对象

JavaScript 用构建函数来定义对象和它们的特征。
构造函数的开头大写,这样与普通函数区分.

    // 定义类function Person(name) {this.name = name;this.greeting = function() {alert('你好, 我叫' + this.name + '。');}}// 创建对象(实例化)var person1 = new Person('Amy');var person2 = new Person('小明');// 调用函数person1.greeting();person2.greeting();

注意: 属性写在构造函数内, 方法定义在构造器的原型上. 这是最好的写法:

构建函数的规范写法

在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。

function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};

构建函数提供了创建您所需对象(实例)的有效方法,将对象的数据和特征函数按需联结至相应对象。
通过一个叫做原形链的参考链链接过去的。
严格的讲, JavaScript 在对象间使用和其它语言的共享机制不同。

1.通过一个普通函数定义一个"人", 创建实例并执行方法:

    //用一个普通的函数定义一个'人'function createNewPerson(name) {var obj = {};obj.name = name;obj.greeting = function() {alert('你好, 我叫' + this.name + '。');}return obj;}// 创建实例, 并调用函数var Mike = createNewPerson('Mike');Mike.greeting();

2.

  • 定义Person类: this – 将数据传给调用该函数的实例
    function Person(name) {this.name = name;this.greeting = function() {alert('你好, 我叫' + this.name + '。');}}
  • 创建对象(实例)
    关键字 new 跟着一个含参函数,用于告知浏览器我们想要创建一个对象.

真正的构造函数

//创建最终的构造函数
function Person(first, last, age, gender, interests) {this.name = {'first': first,'last': last};this.age = age;this.gender = gender;this.interests = interests;this.bio = function() {alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');};this.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');};
};// 创建一个对象
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);// 访问变量和函数
person1['age']
person1.interests[1]
person1.bio()

创建对象的其他方式

Object()构造函数

  1. 首先, 使用Object()构造函数来创建一个新对象(空的对象)。
  2. 点或括号表示法向此对象添加属性和方法。
var person1 = new Object();person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {alert('Hi! I\'m ' + this.name + '.');
}// 或 --------------------------------------------------
var person1 = new Object({name : 'Chris',age : 38,greeting : function() {alert('Hi! I\'m ' + this.name + '.');}
});

create()方法

以指定原型对象创建新的对象.

var person2 = Object.create(person1);

小结

/*
时间:2022年3月22日
总结: js三种创建对象的方法
①特殊函数(就叫类函数吧):
定义 – function Person(参数){属性,方法}
使用 – var 变量名 = new Person(参数具体值);

②Object()构造函数创建空对象. 
③Object.create()方法  

*/

3.对象原型

个人理解:

  1. js是基于原型的语言. 每个对象都有一个原型对象, 而原型对象也可能有它的原型对象, 于是就形成了原型链.
    在这里插入图片描述
  2. 而定义的属性和函数是在原型上的. 不是在函数实例上.

通过原型( prototype )这种机制,JavaScript 中的对象从其他对象继承功能特性;

通过 prototype 属性向已有的构造器添加方法;

原型链: JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——**每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,**并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain)

注意: 理解对象的原型(可以通过Object.getPrototypeOf(obj)或者已被弃用的__proto__属性获得)与构造函数的prototype属性之间的区别是很重要的。前者是每个实例上都有的属性,后者是构造函数的属性。也就是说,Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。

prototype 属性 – 继承成员被定义的地方

__proto__查看原型链

对象.__proto__
对象.__proto__.__proto__

constructor 属性

使用方法:

实例.constructor 

返回值是 实例的原始定义(原型)

修改原型

Person.prototype.farewell = function() {alert(this.name.first + ' has left the building. Bye for now!');
}
function Person(first, last, age, gender, interests) {this.name = {'first': first,'last': last},this.age = age,this.gender = gender,this.interests = interests
};var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);// 修改原型
Person.prototype['farewell'] = function() {alert(this.name.first + ' has left the building. Bye for now!');
}
person1.farewell();

常用模式

在构造器(函数体)中定义属性、
在 prototype 属性上定义方法。
作用: 构造器只包含属性定义,而方法则分装在不同的代码块,代码更具可读性。

// 构造器及其属性定义function Test(a,b,c,d) {// 属性定义
};// 定义第一个方法Test.prototype.x = function () { ... }// 定义第二个方法Test.prototype.y = function () { ... }// 等等……

继承

目的: 创建“子”对象类别(构造器)并从“父”类别中继承功能.

原型式的继承

Person()构造器

function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};

在构造器 Person() 的继承上, 创建一个构造器 Teacher(), eg:

call()函数

在这里插入图片描述

  • 允许您调用一个在这个文件里别处定义的函数
  • 第一个参数是 this ,说明是对 this 指定值.

在这里插入图片描述

有参构造函数的继承

    // 构造器内写属性function Person(first, last, age, gender, interests) {this.name = {first,last};this.aga = age;this.gender = gender;this.interests = interests;}// 原型上定义函数Person.prototype.greeting = () => {alert('Hi! I\'m' + this.name.first + ' ' + this.name.last + '.');}// 在继承Person()构造器属性和含的基础上,创建新的构造器Teather()function Teather(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests); //从Person()中继承过来, this表明指向当前对象 this.subject = subject;}

无参构造函数的继承

    function Brick() {this.width = 10;this.height = 20;}function BlueGlassBrick() {Brick.call(this);this.opacity = 0.5;this.color = 'blue';}var br1 = new Brick();var br2 = new BlueGlassBrick();

在这里插入图片描述
注意:
默认情况下子代对象只包含一个引用构造函数本身的对象属性。父级构造函数prototype属性的方法。

完美继承 核心*****************************************

寄生组合继承:

// 父类 --------------------------------------------------// 构造器内写属性function Person(first, last, age, gender, interests) {this.name = {first,last};this.aga = age;this.gender = gender;this.interests = interests;}// 原型上定义函数Person.prototype.greeting = () => {alert('Hi! I\'m ' + this.name.first + ' ' + this.name.last + '.');}// 子类 --------------------------------------------------function Teacher(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests); //从Person()中继承过来, this表明指向当前对象 -- 继承属性this.subject = subject;}// ******通过创建中间对象,将子类原型和父类原型分开, 不是同一个 -- 继承方法Teacher.prototype = Object.create(Person.prototype);// ******修复构造函数指向(构造函数执行自己)Teacher.prototype.constructor = Teacher;// 子类向原型添加共享方法Teacher.prototype.greeting = function() {var prefix; //n.前缀if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {prefix = 'Mr.';} else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {prefix = 'Mrs.';} else {prefix = 'Mx.';}alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');};// 实例化var teacher1 = new Teacher('明', '小', 32, 'male', ['唱', '跳', 'rap'], '数学');

http://chatgpt.dhexx.cn/article/AJem7equ.shtml

相关文章

js对象基本知识

一:对象的声明与调用 方法1:利用对象字面量创建对象 var obj{}; 创建了一个空对象 属性和值之间用: 结尾用, :后面跟了一个匿名函数 var obj{name:"李旭亮",sex:"男",age:22,sayHi:function(){console.log(hello!);}}使用对象 调用…

JS 对象

一、对象 1、对象概念 对象(object):JavaScript里的一种数据类型可以理解为是一种无序的数据集合用来描述某个事物,例如描述一个人  人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能  如果用多个变量保存则比较散&am…

JS对象中常见的操作方法

本文内容: 介绍对象的两种类型创建对象并添加属性访问对象属性删除对象属性作为函数参数枚举对象的属性数据类型检测Object常用的API 一、JavaScript对象有两种类型 Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(…

JS对象详解

JS对象详解 js的对象是什么?js的对象类型有哪些?具体实例是什么? 一、ECMA-262对JS对象的定义: 属性的无序集合,每个属性存放一个原始值、对象或函数; 对象是无特定顺序的值的数组; 对象是一…

初学JavaScript:js中的对象(对象+原型对象)

文章目录 js对象详解1、创建对象字面量模式创建对象构造函数模式创建对象 2、访问对象访问属性访问方法 3、遍历对象中的属性和属性值4、往对象中新添属性5、删除对象中的属性6、Object显示类型转换(强制类型转换)7、检查属性所属对象7.1 in7.2 Object.prototype.hasOwnPropert…

java testng_java—TestNG单元测试框架

//依赖坐标 org.testng testng 6.14.3 test TestNG的常用注解 1、Test 标记为测试方法 2、 BeforeMethod/AfterMethod 在某个测试方法(method)执行之前/结束之后 3、BeforeClass/AfterClass 在某个测试类(class)所有开始之前/结束之后 4、BeforeTest/AfterTest 在某个测试(test…

TestNG教程三:TestNG中的监听

TestNG中的监听 1.使用监听的目的: Testng虽然提供了不少强大的功能和灵活的选项,但不能解决所有的问题,使用监听器就是用来定制额外的功能以满足我们的需求的; 2.监听器具体实现: 监听器实际上是一些预定义的java接…

TestNG教程二:testNG常用测试类型

1.异常测试 package com.testngdemo; import org.testng.annotations.Test; public class test { Test(expectedExceptions ArithmeticException.class ) public void divisionWithException() { int i 1 / 0; System.out.println("After division the value of i is…

TestNg学习

TestNG是一个测试框架,可以简化广泛的测试需求。 建立工程 首先我们在idea中应该新建一个project,并选择“maven”,点击下一步(如下图) 填写groupId(一般为包名)和ArtifactId(一般…

TestNG教程一:testNG简介

1.TestNG是什么? TestNG是一个测试框架,其灵感来自JUnit和NUnit,但引入了一些新的功能,使其功能更强大,使用更方便。 TestNG是一个开源自动化测试框架;TestNG表示下一代(Next Generation的首字母)。 TestNG类似于JUnit(特别是JU…

TestNG用法

【bak】https://www.cnblogs.com/uncleyong/p/15855473.html TestNG简介 单元测试框架&#xff0c;可以用来设计用例的执行流程 创建maven项目&#xff0c;添加依赖 <dependency><groupId>org.testng</groupId><artifactId>testng</artifactId>&…

testNG - 无法访问org.testng.Assert

【异常】无法访问org.testng.Assert 问题表现问题排查问题解决 问题表现 问题排查 报错的是无法访问Assert类&#xff0c;我琢磨着这个类是testNG中很常用的一个类&#xff0c;怎么会找不到&#xff1f; 先从项目的jar包中管理入手&#xff0c;看看有没有其他毛病。 果不其然…

TestNG-学习笔记

https://testng.org/doc/documentation-main.html TestNG概述 TestNG is a testing framework inspired from JUnit and NUnit but introducing some new functionalities that make it more powerful and easier to use, such as: Annotations. Run your tests in arbitrar…

TestNG的使用

testng在maven项目中的使用 pom.xml <dependencies><dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>7.4.0</version><scope>test</scope></dependency> </depend…

TestNG

1 TestNG简介 TestNG是Java中的一个测试框架&#xff0c;是一个目前很流行实用的单元测试框架&#xff0c;有完善的用例管理模块&#xff0c;配合Maven能够很方便管理依赖第三方插件。 TestNG消除了大部分的旧框架的限制&#xff0c;使开发人员能够编写更加灵活和强大的测试。…

TestNG自动化测试框架详解

TestNG 文章目录 TestNG一、概述与使用1.1 配置环境1.2 测试方法1.3 使用xml文件 二、测试方法常用注解2.1 配置类注解2.2 非配置类注解2.2.1 Parameters2.2.2 DataProvider 三、依赖测试四、忽略测试五、超时测试六、分组测试七、失败重试机制7.1 IRetryAnalyzer接口7.2 测试方…

TestNG整理

1 基本概念 TestNG:即Testing, Next Generation,下一代测试技术,是根据JUnit和NUnit思想,采用jdk的annotation技术来强化测试功能并借助XML 文件强化测试组织结构而构建的测试框架。最新版本5.12,Eclipse插件最新版本:testng-eclipse-5.12.0.6 TestNG的应用范围: 单…

TestNG使用教程详解

一、TestNG介绍 TestNG是Java中的一个测试框架&#xff0c; 类似于JUnit 和NUnit, 功能都差不多&#xff0c; 只是功能更加强大&#xff0c;使用也更方便。 详细使用说明请参考官方链接&#xff1a;TestNG - Welcome WIKI教程&#xff1a;TestNG - 小组测试( Group Test)_学习…

TestNG单元测试框架详解

目录 前言 ​1. TestNG使用流程 1.1TestNG安装 1.2 创建Maven项目 1.3 Maven配置 1.4 项目TestNG测试类 1.5 运行TestNG 2、TestNG常用注解 3.xml方式运行 3.1 鼠标右击testng.xml运行 3.1 使用maven运行 4. 常用的断言&#xff08;assert&#xff09; 5. TestNG预…

使用ZRender类库画直线、圆弧、曲线以及点在线上的运动

最近在学习Zrender类库&#xff0c;并利用Zrender 让点在直线、圆弧、曲线上运动。大概的写了一些. Zrender是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器. 这里我运用的是Canvas画布去画的.想了解Zrender内的属性&…