js对象基本知识

已于 2023-05-02 20:29:20 修改
阅读量2.3k 收藏 6
点赞数
分类专栏： js 文章标签： javascript 前端 开发语言
于 2022-10-26 20:06:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxllxl211/article/details/127538847
版权

一：对象的声明与调用

方法1：利用对象字面量创建对象
var obj={}; 创建了一个空对象
属性和值之间用: 结尾用,
:后面跟了一个匿名函数`

var obj={
            name:"李旭亮",
            sex:"男",
            age:'22',
            sayHi:function(){
                console.log('hello!');
            }
        }

使用对象
调用对象属性：【1】对象.属性名 【2】对象名[‘属性名’]

console.log(obj.age);   
        console.log(obj['name']);
        // 调用方法： 对象名.方法名();
        obj.sayHi();

运行结果：
在这里插入图片描述

方法2：new Object()

<script>
        p=new Object();///创建一个空的对象
        p.name="李旭亮";
        p.age="22";
        p.sex="男";
        
        p.sayHi= function(){
            console.log("hi~");
        }
        // 利用 等号=赋值的方法，添加对象的属性和方法
        // 每个属性和方法之间，用分号结束
        console.log(p.age);
        console.log(p.sayHi());
    </script>

运行结果：
在这里插入图片描述

方法3：利用构造函数创建对象

构造函数:是一种特殊的函数，主要用来初始化对象
使用场景:常规的 … 语法允许创建一个对象。比如我们创建了佩奇的对象，
继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。
在这里插入图片描述
又例如：
实例成员:
通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员(实例属性和实例方法)

说明
1.为构造函数传入参数，创建结构相同但值不同的对象
2.构造函数创建的实例对象彼此独立查不影响

// 定义构造函数
function People(name, age, gender) {
    this.name = name;//实例成员
    this.age = age;
    this.gender = gender;
}
// 定义对象
//实例化 lxl和yll都是实例对象
let lxl = new People('李旭亮', 18, '男');
let yll = new People('叶林林', 18, '女');
//lxl.gender 实例对象lxl的实例成员
console.log(lxl.gender);//男

静态成员:
构造函数的属性和方法被称为静态成员(静态属性和静态方法)
例如Data.now()；Data是构造函数，now（）是静态属性

说明:
1.静态成员只能构造函数来访问
2.静态方法中的this指向构造函数

// 定义构造函数
function Pig(name) { 
    this.name = name;
}
// 构造函数的属性和方法称为静态成员
Pig.weight=200;//静态属性
Pig.sleep=function(){//静态方法
    console.log('睡觉');
}
// 静态成员只能构造函数来访问
console.log(Pig.weight);//200

let p1=new Pig('lll');
console.log(p1.sleep);//undefined

在这里插入图片描述

对象的基本操作
增删改查

//增  增加地址
obj.address="中国";
console.log(obj);
// 删  删除名字
delete obj.name;
console.log(obj);
// 改 将年龄修改为100
obj.age=100;
console.log(obj);

在这里插入图片描述

1.1关于对象的注意点：

在js对象中，如果属性名和属性值形同，那么就可以省略属性值。

let age = 30
const person = {
    // age: age,
    age,
}
console.log(person.age);//30

对象与函数的一点区别：

let data = {
    x:1,
    y:2,
}
const a=data;
const b=data;

在这里插入图片描述

function data() {
    return {
        x: 1,
        y: 2,
    }
}
const a=data();
const b=data();

console.log(typeof data());//对象
console.log(typeof data);//函数
console.log(typeof a);//对象
// 由此观之，对象还是函数，主要看他的输出结果

在这里插入图片描述

二：对象的遍历

for in对数组进行遍历

let arr=['red','green','blue'];
for (const key in arr) {
    console.log(key);//'0' '1' '2' 像是数组的序号，但这是字符串型的
    console.log(arr[key]);//'red' 'green' 'blue'
}

for in遍历对象
先创建一个对象

let lxl={
    name:'李旭亮',
    sex:'男',
    age:22,
    address:'CN',

    study:function(){
        console.log("正在学习");
    }
}

遍历：

for (const key in lxl) {
    console.log(key);
}

在这里插入图片描述
lxl[key]------类似于数组的 数组名[序号] arr[i]

for (const key in lxl) {
    console.log(lxl[key]);
}

在这里插入图片描述
在这里插入图片描述
数组对象的遍历

let student = [
    { name: '小明，', age: 18, gender: '男', address: 'CN' },
    { name: '小红', age: 34, gender: '女', address: 'USA' },
    { name: '小白', age: '23', gender: '男', address: '河南省' },
    { name: 'lxl', age: 100, gender: '男', address: 'UK' ,
        study:function(){
            console.log("2023.2.12");
        }}
];
for (let i = 0; i < student.length; i++) {
    for (const key in student) {
    //student[i]相当于数组名
        console.log(student[i].address);
    }
}

在这里插入图片描述

三：对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法:
1.赋值运算符 = 左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2.对象属性的值将被赋值给与属性名相同的变量

const { uname1, age1 } = { uname1: '李旭亮', age1: '18' };

3.注意解构的变量名不要和外面的变量名冲突否则报错
在这里插入图片描述

4.对象中找不到与变量名一致的属性时变量值为 undefined

const { uname2, age1 } = { uname1: '李旭亮', age1: '18' };
console.log(`我的名字：${uname2}`);

在这里插入图片描述
对象解构例子：

// 对象解构的写法
obj = {
uname: '叶林林',
age: 18
}
const { uname, age } = obj;
console.log(uname);//叶林林

const { uname2, age1 } = { uname1: '李旭亮', age1: '18' };
console.log(`我的名字：${uname2}`);//undefined

5.对象解构的更名 旧变量名：新变量名

const { uname1:uname2, age1 } = { uname1: '李旭亮', age1: '18' };
console.log(`我的名字：${uname2}`);//我的名字：李旭亮

四：数组对象的解构

比对象解构多加了一个[ ]

const fairy = [
    {
        uname: '林宝宝',
        age: 18,
        home: '新乡'
    }
];

const [{ }] = fairy;
console.log(`仙女是${uname}`);//仙女是叶林林

这个输出结果不是林宝宝，因为上面还有一个uname，重名了。

五：多级对象解构

const pig = {
    name: '佩奇',
    age: 6,
    family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        brother: '乔治',
    }
}
// 多级对象解构
const { name, age, family: { mother, father, brother } } = pig;
console.log(mother);//猪妈妈

六：数组对象多级解构

const pig = [
    {
        name: '佩奇',
        age: 6,
        family: {
            mother: '猪妈妈',
            father: '猪爸爸',
            brother: '乔治',
        }
    }
]
// 多级对象解构
const [{ name, age, family: { mother, father, brother } }] = pig;
console.log(mother);//猪妈妈

七：Object静态方法

定义一个数组

let arr = [1, 2, 3, 4, 5];

没有初始值，计算这个数组的连加和

const total = arr.reduce(function (prev, current) {
    return prev + current;
})
console.log(total);//15

有初始值

const arr1 = arr.reduce(function (prev, current) {
      return prev + current;
}, 100)
console.log(arr1);//115

箭头函数的写法

const total3 = arr.reduce((prev, current) => prev + current, 1000);
console.log(total3);//1015

八：原型对象protopyte

目标:能够利用原型对象实现方法共享

  • 构造函数通过原型分配的函数是所有对象所 共享的
  • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象
  • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法
  • 构造函数和原型对象中的this 都指 实例化的对象
function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing=function(){
        console.log('唱歌');
    }
}
const a=new Star('a',12);
const b=new Star('b',120);
console.log(a.sing);//输出是一个函数
// 对象a的sing方法和对象b的sing方法不一样，每个新的对象，
// 都是一个新的sing方法，但是每个对象的sing方法是一个的，会浪费内存
console.log(a.sing===b.sing);//false

在这里插入图片描述

用原型对象prototype可以解决这个问题

Star.prototype.sport=function(){
    console.log('运动');
}
console.log(a.sport);//也是一个对象
console.log(a.sport===b.sport);//true

在这里插入图片描述

8.1、对象原型与原型对象

对象原型 __proto__
原型对象 prototype

对象都会有一个属性 __proto__ 指向构造函数的 prototype原型对象，
之所以对象可以使用构造函数prototype原型对象的属性和方法，
就是因为对象有 __proto__ 原型的存在。

// 定义构造函数
function Star(name = '刘德华', age = 55) {
    this.name = name;
    this.age = age;
}

// 用原型对象创建公共方法
Star.prototype.sing=function(){
    console.log('唱歌！');
}

// 实例化对象
const p = new Star('lxl',34);

console.log(p.__proto__);//{sing: ƒ, constructor: ƒ}
console.log(Star.prototype);//{sing: ƒ, constructor: ƒ}

// 对象身上,系统自己添加一个 __proto__指向我们构造函数的原型对象
console.log(p.__proto__===Star.prototype);//true

在这里插入图片描述

__proto__对象原型和原型对象prototype是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype
在这里插入图片描述

在这里插入图片描述

// 构造函数和原型对象中的this 都指 实例化的对象
let thisGouzao;
let thisYuanxing;
function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    thisGouzao = this;
}
Star.prototype.sport = function () {
    thisYuanxing = this;
}
const lxl = new Star('李旭亮', 100);
console.log(lxl.sport());//undefined
console.log(thisGouzao);//{uname: '李旭亮', age: 100}
console.log(thisYuanxing);//{uname: '李旭亮', age: 100}
console.log(thisGouzao === lxl);//true
console.log(thisYuanxing === lxl);//true
console.log(thisGouzao === thisYuanxing);//true

九：利用原型自定方法

function a() {
}
console.log(typeof a);//function
console.log(typeof Date);//function
console.log(typeof Array);//function

Date，Array和a其实是一样的，都是方法

// 需求1：制造数组求最大值方法
Array.prototype.max = function () {
    // ...this指向实例对象 数组是对象
    // console.log(...this);//1 2 3
    return Math.max(...this);
}
const arr = [1, 2, 3];
console.log(arr.max());//3

// 需求1：制造数组求和方法
Array.prototype.sum=function(){         
    const a= this.reduce(function(prev,current){
        return prev+current;
    })
    return a;
}
console.log(arr.sum());//6

十：class与类的继承

// 定义一个人类
class Person {
    // 构造器
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // 方法
    hello() {
        console.log('你好啊');
    }
}
// 实例化对象
let lxl = new Person('李旭亮', 23);
console.log(lxl.age);//23

// 对象的继承
class Woman extends Person {
    // 构造器
    constructor(name, age, grade) {
        // 通过super调用Person类的构造器，进行赋值
        super(name, age);
        this.grade = grade;
    }
    // 自己的方法
    sleep() {
        console.log('我喜欢睡觉！');
    }
}
// 实例化对象
let yll = new Woman('叶林林', 20, 102);
console.log(`名字：${yll.name}，年龄：${yll.age}，成绩：${yll.grade}`);

在这里插入图片描述

十一：对象中的函数function和:可以省略

obj={
    name:'yll',
    age:23,
    // doing:function(){
    //     console.log('我在学习');
    // }
    doing(){
        console.log('在对象里面，方法可以省略function和：');
    }
}
obj.doing()

在这里插入图片描述

对象、函数中this的指向

const obj={
    name:'lxl',
    age:453,
    doing:function(){
        console.log('----------doing:function()--------------');
        console.log(this);
    },
    study:()=>{
        console.log('---------------study:()=>-------------------');
        console.log(this);
    },
    sleep(){
        console.log('------------------sleep()----------------------');
        console.log(this);
        eat:()=>{
            console.log(this);
        }
    }
};
obj.doing();
obj.study();
obj.sleep()

在这里插入图片描述

lxl211
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS面向对象函数的四种调用模式
黑马程序员广州中心的专栏
03-04 159
经验/问题描述： 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器...这些东西的本质都是函数，其中的区别只是所处的位置不同。根据函数内部this的指向不同，可以将函数的调用模式分成4种：函数模式、方法模式、构造器模式和上下文模式等四种不同的调用模式。 解决方法： 首先先来分析this指向问题： 1、任何函数都有属于自己的thi...
[JavaScript]调用对象内函数的两种方式
KobeCurry30的博客
10-30 3001
Javascript中调用对象内函数的两种方式. 如下例子: var cal = { plus:function(x,y){ return x + y; }, reduce:function(x,y){ return x - y; }, multiply:function(x,y){ return x * y; }, divide:function(x,y){ return x / y; } } 第一种调用.直接对象名.方法名 window.οnlοad
js对象操作的14种方法
Jenny_ljj的博客
02-15 1186
// 1.获取原型 [[getPrototypeOf]] // 以下 3 种方式都获取到了 obj 的原型，但是只有第一种是函数式方法，是 js 内置提供的方法，推荐使用第一种 console.log(Object.getPrototypeOf(obj)); console.log(obj.__proto__); console.log(Object.prototype);
js 对象（Object）方法总结
暖光的博客
08-24 2068
1. create 创建一个对象 const obj = Object.create({a:1}, {b: {value: 2}}) 第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举） obj.__proto__.a === 1 // true obj.b = 3; console.log(obj.b) // 2 //创建一个可写的,可枚举的,可配置的属性p obj2 = Object.create({}, {
2024年前端最新js-对象-学习笔记，面试考点安排
最新发布
2401_84447233的博客
05-13 860
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。前面创建对象的方法一次只能创建一个对象，使用构造函数的方法一次可以创建多个属性值相同的对象。var 对象名1 = new 构造函数名();//调用函数返回的是一个对象。//创建了一个空的对象。//k 变量输出的就是 属性名。var 对象名2 = new 构造函数名();我们只要new 构造函数名() 调用函数就创建一个对象。对象名.方法名 = function() {
java调用对象属性和方法_java面向对象-------类属性和方法，不同类之间调用
weixin_29544469的博客
03-02 540
package java面向对象;/*** 类的创建*/public class Stu {//l类属性int age;int id;String name;Computer comp;//计算机，引用了Computer类对象//类方法void study(){System.out.println("我在学习使用电脑"+comp.brand);}//构造方法。用于创建这个类的对象。无参的构造方法...
JavaScript面向对象核心知识与概念归纳整理
10-15
主要介绍了JavaScript面向对象核心知识与概念,整理总结了JavaScript面向对象程序设计中基本概念、原理与操作注意事项,需要的朋友可以参考下
JavaScript学习笔记之JS对象
11-28
JavaScript中的对象是编程的核心概念，尤其在JS中，它们提供了数据结构和操作这些数据的方式。在本篇学习笔记中，我们将重点关注两种基本的对象类型：日期对象（Date）和数组对象（Array）。 首先，让我们来看看...
JS数组中对象去重操作示例
12-01
1. **对象去重的基本思路** 在JavaScript中，由于对象是引用类型，直接比较两个对象是否相等（`==`或`===`）并不适用于判断它们是否相同，因为它们的内存地址不同。因此，我们需要根据对象的属性来判断它们是否重复...
浅谈JavaScript的内置对象和浏览器对象
10-22
JavaScript的内置对象是语言本身提供的一些预定义对象，它们提供了基本的数据类型和功能。以下是一些常见的内置对象： 1. Array对象：Array对象是用于处理数组的，它提供了许多方便的方法，如concat()用于合并数组...
类 对象 调用方法
kasumiutaha的博客
09-12 5035
class Cat: # 定义类 对象必须有对应的类 类名使用大驼峰命名法 # 定义对象方法 对象方法需要在对应的类中定义 def eat(self): # 定义对象方法和定义函数类似,只不过对象方法的第一个形参必须是self print(“吃东西”) 创建对象 cat1 = Cat() 调用对象方法 引用对象的变量名.方法名() ca...
用Javascript实现静态对象、静态方法和静态属性
Nacidar的专栏
01-12 945
Javascript语言的面向对象特征很弱，其他面向对象语言在创建类时只要使用关键字static即可指定类为静态类，Javascript没有提供static这样的关键字，要让Javascript也具有“静态”特性只有靠一些“奇技淫巧”了。代码中列举了两种静态方法/属性的实现方式，一种是静态类的静态方法和属性，另一种是非静态类的静态方法和属性，代码说明都写在每行的代码注释里，这里就不重复了。
【javascript】Javascript中调用对象内函数的两种方式.
如切如磋，如琢如磨，臻于至善。
03-16 4263
如下例子: var cal = { plus:function(x,y){ return x + y; }, reduce:function(x,y){ return x - y; }, multiply:function(x,y){ return x * y; }, divide:function(x,y){ return x / y; } }
详细讲解js中静态对象和构造函数的区别
wu_qionglei的专栏
02-06 2830
平常我们会经常使用JSON形式，或者var obj=function(){}亦或function(){}这么几种对象的构建办法，有时会认为这是等价的办法，然而他们还有不同。 来看下下面的对比代码： var objJson={ 　　op1:'objJson option1', 　　fn1:function(){ 　　　　alert(this.op1) 　　} } 在这种形式的声明下
JS 面向对象，以及静态方法与实例方法的调用区别
qq982120067的博客
07-16 2152
//面向对象：构造函数+原型 方式，创建 类；使用：(function(){  ...  })();  包起来 是因为在js中没有块级作用域(新的ES标准已经有了，这里就不说了)，这种写法是为了防止 //里面的变量污染外面的变量！ (function() { var Person = function(name, age) { this.name = name; this.age
js静态方法
weixin_34124577的博客
07-02 992
1.ajax() 方法是属于“函数”本身的，和返回的对象没有关系 2.bark药调用，必须药new Hashiqi()得到对象，且由返回对象才能调用 3.ajax()方法药调用，不需要new对象，直接用hashiqi来调用 转载于:https://www.cnblogs.com/DJYBlog/p/4241906.html...
[JavaScript]对象的静态属性
weixin_61273407的博客
01-16 1135
对象的静态属性 : 在对象中直接生成的属性效果, 就是静态属性 在 JavaScript 中, 有两种添加对象静态属性的方法 : 第一种 : JavaScript 中传统创建对象的方式 //传统创建对象的方式 let obj = { //以下都是对象的静态属性 name: '对象', sex: '女', skills() { return '漂亮'; }, }; console.log(obj); console.log(obj.na
JavaScript对象与基本语法解析 - 高罗峰课件
"JavaScript 课件 高罗峰" 这篇课件主要讲解了JavaScript中的...这篇课件涵盖了JavaScript的基础知识，包括Object对象的使用、基本语法、脚本代码的位置以及保留关键字等，对于初学者理解JavaScript编程非常有帮助。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值