简单聊聊JavaScript 中的原型链、null 和 undefined 的区别

1.原型链

个人观点：原型链和逻辑判断里三段论有些类似，一个大前提、一个小前提、一个结论。比如，动物会吃肉，狗是动物，所以狗会吃肉。这也是继承的思想

原型和构造函数

JavaScript 是基于原型的面向对象编程语言，每个对象都有一个内部链接到另一个对象（即原型）。这个机制被称为原型链。原型链的存在使得对象可以继承其他对象的属性和方法。

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.sayHello(); // Hello, my name is Alice

 

在上面的例子中，Person 是一个构造函数，Person.prototype 是它的原型对象。通过 new Person('Alice') 创建的 alice 对象继承了 Person.prototype 上的 sayHello 方法。这种继承关系是通过原型链实现的。

原型链的继承

当访问一个对象的属性或方法时，JavaScript 引擎首先会在对象本身查找。如果找不到，它会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端。

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name) {
    Animal.call(this, name); // 继承属性
}

Dog.prototype = Object.create(Animal.prototype); // 继承方法
Dog.prototype.constructor = Dog;

const dog = new Dog('Buddy');
dog.eat(); // Buddy is eating

 

在这个例子中，Dog 继承了 Animal 的属性和方法。通过 Object.create(Animal.prototype)，我们创建了一个新的原型对象，这个对象的原型是 Animal.prototype。这就建立了一个原型链，Dog 的实例 dog 可以访问 Animal 的方法。

2.null 和 undefined（面试经常问）

undefined

undefined 是 JavaScript 中的一种基本数据类型，表示变量已经声明但尚未赋值。它也是全局对象的一个属性（window.undefined）。

let x;
console.log(x); // undefined

function greet(name) {
    console.log(`Hello, ${name}`);
}

greet(); // Hello, undefined

 

在上面的例子中，变量 x 被声明但没有赋值，因此其值是 undefined。函数 greet 在没有传入参数时，name 的值也是 undefined。

null

null 是 JavaScript 中的另一个基本数据类型，表示一个空对象引用。它通常用于显式地表示变量没有任何值。

let y = null;
console.log(y); // null

const obj = {
    key: null
};
console.log(obj.key); // null

 

在上面的例子中，变量 y 被赋值为 null，表示它不引用任何对象。同样，obj.key 被显式设置为 null。

null 与 undefined 的区别

尽管 null 和 undefined 都表示“没有值”，但它们有显著的区别：

1. 类型：

   • undefined 是一个类型。
   • null 是一个对象类型。

2. 用法：

   • undefined 表示变量尚未赋值。
   • null 表示变量已赋值为空对象。

3. 比较：

   • 使用 == 比较时，null 和 undefined 被认为是相等的：

   • console.log(null == undefined); // true

      

   • 使用 === 比较时，null 和 undefined 被认为是不相等的：

   • console.log(null === undefined); // false