JavaScript对象基础

最新推荐文章于 2024-09-27 15:27:45 发布

小朱想偷月亮

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量37

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端原型模式

本文链接：https://blog.csdn.net/zdn135860_/article/details/129691445

版权

JavaScript基础专栏收录该内容

44 篇文章 0 订阅

订阅专栏

多个数据的封装体，用以保存多个数据的容器
一个对象代表现实中的一个事物
用对象统一管理多个数据
JavaScript 基于 prototype，而不是基于类的。

对象组成

属性：属性名（字符串）和属性值（任意）
方法：属性值为函数的属性

对象分类

内置对象：
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
- 比如：Object、Math、Date、String、Array、Number、Boolean、Function、arguments、error、regexp等。
宿主对象：
- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
- 比如 BOM DOM。比如console、document。
自定义对象：
- 由开发人员自己创建的对象
- 通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。

创建对象

对象构造函数

var object = newObject();

对象创建方法

Object 的 create 方法通过将原型对象作为参数传递来创建一个新对象
var object = Object.create(null);

字面量

var object = {};

构造器

使用new关键字

  function Person(name){
     var object = {};
     object.name=name;
     object.age=21;
     return object;
  }
  var object = new Person("Sudheer");

new 和不 new的区别

如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
如果不 new 的话函数内的 this 指向的是 window，获取的是该函数的返回值（所以不return就获取不了对象）

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    return [this.firstname,this.lastname,this.age,this.eyecolor,this] 
}

var myFather=new person("John","Doe",50,"blue");
var myMother=person("Sally","Rally",48,"green");
console.log(myFather) // this 输出一个 person 对象
console.log(myMother) // this 输出 window 对象

带有原型的函数构造函数

function Person(){}
Person.prototype.name = "Sudheer";
var object = new Person();

类创建（es6）

  class Person {
     constructor(name) {
        this.name = name;
     }
  }

  var object = new Person("Sudheer");

单例模式

Singleton 是一个只能实例化一次的对象。对其构造函数的重复调用返回相同的实例，这样可以确保它们不会意外创建多个实例。

  var object = new function(){
     this.name = "Sudheer";
  }

访问对象

访问属性

**objectName.propertyName**：简单但不通用
**objectName[propertyName]****：**麻烦但通用可以是变量、属性名包括特殊字符：- 空格

访问方法

调用：**objectName.methodName()**
**objectName.methodName**则只输出整个函数代码

计算属性

在创建一个对象时，可以在对象字面量中使用方括号

et fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

可选链 ?.

如果可选链 ?. 前面的值为 undefined 或者 null，它会停止运算并返回 undefined。
value?.prop：

如果 value 存在，则结果与 value.prop 相同，
否则（当 value 为 undefined/null 时）则返回 undefined，和直接“.”来说不会报错

注意：

过度使用会导致代码中的错误在不应该消除的地方消除
?.前的变量必须已声明
可以用于读取或者删除，但是不能写入user?.name ="John";//不起作用

短路效应

?.左边的部分不存在，就会立刻停止运算（短路效应）

变体

?.()

let userAdmin = {
  admin() {
    alert("I am admin");
  }
};
let userGuest = {};
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // 啥都没发生（没有这样的方法）

?.[]

let key = "firstName";
let user1 = {
  firstName: "John"
};
let user2 = null;
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined

for…in 循环

JavaScript for…in 语句循环遍历对象的属性。
** **for…in 循环中的代码块将针对每个属性执行一次。

for (variable in object)
{执行的代码……}
var person={fname:"John",lname:"Doe",age:25}; 
for (x in person)
{
    txt=txt + person[x];
}

基本数据类型转换成对象

JS 为我们提供了三个基本包装类：

String()：将基本数据类型字符串，转换为 String 对象。
Number()：将基本数据类型的数字，转换为 Number 对象。
Boolean()：将基本数据类型的布尔值，转换为 Boolean 对象。

通过上面这这三个包装类，我们可以将基本数据类型的数据转换为对象。
同样的包装类，每一次调用，都会产生不同的对象（对象地址的唯一性）

包装类作用

当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将基本数据类型转换为引用数据类型，这样的话，基本数据类型就有了属性和方法，然后再调用对象的属性和方法；调用完以后，再将其转换为基本数据类型。

var str = 'qianguyihao';
console.log(str.length); // 打印结果：11

// 步骤（1）：把简单数据类型 string 转换为 引用数据类型  String，保存到临时变量中
var temp = new String('qianguyihao');

// 步骤（2）：把临时变量的值 赋值给 str
str = temp;

//  步骤（3）：销毁临时变量
temp = null;