阿里面试送分题,深入对象、new操作符与包装类的奥秘

125 阅读3分钟

首先咱们来看下面一道面试题,可以思考一下输出值会是多少。

var str = 'abc' 
str += 1 
var test = typeof(str) 
if (test.length === 6) {
    test.sign = 'typeof的返回结果可能是String'
}
console.log(test.sign);

这里的输出值是undefined,让我们一起看看具体是什么原理吧。

对象:JavaScript的万能钥匙

想象一下,你在构建一个虚拟城市,每栋建筑(变量)都需要设计图纸(数据结构)和建筑材料(值)。在JavaScript中,这些“图纸”就是对象。对象是一种复合数据类型,可以存储多个键值对(key-value pairs),每个键(key)都是一个字符串,而每个值(value)可以是任何数据类型,包括另一个对象。

创建对象的三种方法
  1. 对象字面量:这是最直观的创建方式。
var mrPeng = {
    name:'彭于晏',
    age:18,
    sex:'male',
    health: 100,
}
  1. new Object():这种方式相对繁琐,但更加灵活。
var apartment = new Object();
apartment.rooms = 2;
apartment.floor = 5;
  1. 构造函数法
function Person(name,age) {
    var self = {}
    self.name = name;
    self.age = age;
    return self;
}
let p = Person();

new操作符

在JavaScript中,new操作符扮演着造物主的角色,它负责创造新的对象并赋予特定的形态和能力。当我们用new调用一个函数时,幕后会发生三步魔法:

  1. 初始化:首先,new会创建一个全新的空对象,这个对象将会成为即将创建的实例。
  2. 赋值:然后,函数体内的代码被执行,此时this关键字指向新创建的对象,你可以通过this.property = value给对象添加属性或方法。
  3. 返回:函数执行完毕,如果没有明确返回其他对象,new会自动返回这个新创建的对象。

以构造函数为例:

function Vehicle(type) {
    this.type = type;
    this.startEngine = function() {
        console.log("Engine started for a " + this.type);
    };
}
var car = new Vehicle("Car");
car.startEngine(); // Engine started for a Car

包装类

首先,咱们要知道原始值是什么,原始值包括字符串、数字、布尔值,原始值不具有属性和方法。但是,包装类(String、Number、Boolean)能让这些原始值短暂地拥有对象的特性。当你试图给原始值添加属性或方法时,JavaScript先将它们包装成对应的包装类对象。不过,这是限时的,一旦操作完成,原始值又会恢复原状,新增的属性也会消失,仿佛从未发生过。

以字符串为例:

var str = 'abcde' // new String('abcde')
str.length = 2 // new String('abcde').length = 2
// str.valueOf() 将一个对象转为原始值 ====>>>> 'abcde'
// delete str.length
console.log(str);

这是因为V8引擎会在执行时检测到这种操作,通过valueOf方法确认这是一个原始值,随后遵守原始值不应拥有属性的原则,默默移除了str.length这个“非法”添加的属性。

那么现在咱们再来看刚开始的面试题,是不是变得简单了很多呢。

var str = 'abc' // new String('abc')
str += 1 // str = 'abc1'
var test = typeof(str) // 'string'
if (test.length === 6) {
    test.sign = 'typeof的返回结果可能是String'
    // new String(test).sign = 'xxx'
    // typeOf()
    // delete test.sign
}
console.log(test.sign); // new String(test).sign

总结

对象、new操作符和包装类,这三个概念构成了JavaScript面向对象编程的三大支柱。对象让我们能够组织和操作数据,new则赋予了我们创造复杂数据结构的能力,而包装类则巧妙地模糊了原始值与对象之间的界限,让JavaScript的世界更加丰富多彩。掌握这些核心概念,你就能在JavaScript的编程之旅中更加自如地穿梭,构建出既美观又强大的应用程序。