透彻JS中的对象解读—进行包装
前言:
今天简单谈谈JS中的对象,以及对象的创建,对象的包装,内容有点细,代码有点杂,但却通俗易懂。
正文:
1. 对象的定义:
在JavaScript中,对象是一种数据结构,用于存储键值对(key-value pairs)。对象可以被用来表示复杂的数据结构,它们可以包含各种数据类型的值,比如字符串、数字、布尔值、数组、甚至其他对象。
对象可以通过两种方式来定义:对象字面量和使用构造函数。
对象字面量:对象字面量是一种简单的方式来创建对象,它由一对大括号 {}
包裹,键值对之间使用冒号 :
分隔,每个键值对之间使用逗号 ,
分隔。
// 使用对象字面量创建对象
var person =
{ name: "John",
age: 30,
isStudent: false };
构造函数:使用构造函数可以创建多个相似的对象。构造函数是一个普通的函数,通过 new
关键字调用。通常情况下,构造函数的命名以大写字母开头,这有助于区分构造函数和普通函数。
// 使用构造函数创建对象
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
}
// 使用构造函数创建对象实例
var person1 = new Person("John", 30, false);
var person2 = new Person("Alice", 25, true);
对象的概念
在JavaScript中,对象是一种复合值,它们可以包含零个或多个属性(键值对)。每个属性都有一个名字和一个值,这个值可以是任何数据类型,包括其他对象。对象是一种引用类型,这意味着当你将一个对象赋值给另一个变量时,实际上是将对原始对象的引用赋值给了新变量,而不是创建一个新的对象副本。这也意味着如果改变一个对象,那么所有引用它的变量都会反映出这些变化。
JavaScript的对象是动态的,这意味着你可以随时添加、修改或删除对象的属性和方法。
对象的增删查改
var mrXu = {
name: 'xuyu',
age: 18,
sex: 'boy',
run: function() {
console.log('I am running');
this.health++
},
drink: function() {
console.log('I am drinking, cool!');
this.health--
},
health: 100
}
// 增加一个属性
// mrXu.girlFriend = 'lilei'
//修改
// mrXu.age = 20
// 查找
// console.log(mrXu.health);
// 删除
// delete mrXu.sex
// mrXu['girlFriend'] = '章若楠'
var abc = 'girlFriend'
mrXu[abc] = '章若楠' // mrXu.abc = '章若楠'
console.log(mrXu.boyFriend);
根据代码所示的方法进行修改,访问对象上不存在的属性,得到undefined,而不是报错,下面再详细讲解一下创建对象。
创建对象
- 创建对象字面量
- 调用系统自带的构造函数 new Object()
- 让this.proto === 函数的.prototype
- 调用自定义的构造函数
function Car(color) {
this.name = 'su7'
this.height = '1400'
this.lang = '5000'
this.weight = 1000
this.color = color
}
let car1 = new Car('red')
let car2 = new Car('green')
console.log(car1,car2);
var obj = {} // 创建对象字面量 / 对象直接量
// Object() 构造函数 String() Number() Boolean()
var obj2 = new Object()
console.log(obj2);
第二段代码中,用{} 和 new 的构建都是相同的效果构造对象。
函数构造被 new 的过程
// 构造函数
function People(name,age,sex) {
this.name = name
this.age = age
this.sex = sex
}
let p1 = new People('longlong',18,'boy')
// 构造函数被new时的过程
console.log(p1);
构造函数 new 的过程
- new 会在构造函数中创建一个 this 对象
- 执行函数中的逻辑代码 (相当于往this对象上添加属性)
- return this 对象
包装类
在JavaScript中,包装类(Wrapper Class)是一种特殊的对象,用于将原始数据类型(如字符串、数字、布尔值)包装成对象。JavaScript中有三种基本的原始数据类型:字符串、数字和布尔值。当你尝试在原始数据类型上调用对象的方法时,JavaScript会临时将原始数据类型转换成对应的包装类对象,然后调用该对象上的方法,完成操作后,再将其转换回原始数据类型。这个过程就是包装类的工作原理。
var num = 123
num.abc = 'hello'
console.log(num.abc);
这里的打印结果并没有报错,而是undefined。按道理num是数字类型,后来又用了字符串的调用,理论上是报错的。解释一下这里包装类的隐式过程。
原始值是不能拥有属性和方法的。属性和方法是对象独有的
new Number(123).abc = 'hello'
delete new Number(123).abc
console.log(num.abc);
包装类 -- 这个隐式的过程,创建字面量的时候会发生包装类,V8会直接将数字类型转换成字符串来用,到第二行,V8发现你想要的是数字类型,所以矛盾了,执行delete操作删除字符串,导致最终打印undefined。
var num = new Number(123)
num.abc = 'hello'
console.log(num.abc);
console.log(num * 2);
对于这种自己构造的函数,直接就显示是字符串类型,不需要进行delete操作,第一个打印字符串hello,第二个转换回数字打印246。
测试
这道题目留给大家思考一下,若是没有上面的包装类讲解,基本原理不懂很难解答出来,但是现在大家应该有能力解答出来;
// 面试题
var str = 'abc'
str += 1
var test = typeof (str)
if (test.length == 6) {
test.sign = 'typeof 的返回结果是String'
}
console.log(test.sign);
总结:
清楚理解好对象字面量和创建对象两种方法,在构造函数中 new 的过程是如何执行的,这样才能对包装类印象深刻。
转载自:https://juejin.cn/post/7366072920617189428