首页 > 编程语言 >简单聊聊JavaScript 中的原型链、null 和 undefined 的区别

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

时间:2024-07-28 13:50:35浏览次数:21  
标签:null console undefined JavaScript 原型 prototype name

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.nullundefined(面试经常问)

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

nullundefined 的区别

尽管 nullundefined 都表示“没有值”,但它们有显著的区别:

  1. 类型

    • undefined 是一个类型。
    • null 是一个对象类型。
  2. 用法

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

    • 使用 == 比较时,nullundefined 被认为是相等的:
    • console.log(null == undefined); // true

       

    • 使用 === 比较时,nullundefined 被认为是不相等的:
    • console.log(null === undefined); // false

        

标签:null,console,undefined,JavaScript,原型,prototype,name
From: https://www.cnblogs.com/zx618/p/18328155

相关文章

  • 探索 IPython 中的 %%javascript 魔法命令:运行 JavaScript 代码的秘籍
    引言IPython是一个强大的交互式计算环境,它不仅支持Python语言,还通过各种魔法命令扩展了其功能。其中,%%javascript魔法命令是IPython扩展中一个非常有趣的特性,它允许用户在IPython环境中直接运行JavaScript代码。这对于需要在数据科学和科学计算中使用JavaScript......
  • 当我尝试使用 HTMLSession 渲染 JavaScript 时,出现错误
    我尝试使用HTMLSession渲染JavaScript,但是当我尝试时它给了我一个错误。>>>r.html.render()Futureexceptionwasneverretrievedfuture:<Futurefinishedexception=NetworkError('ProtocolerrorTarget.detachFromTarget:Targetclosed.')>pyppeteer.error......
  • vscode-react-javascript-snippets
    SnippetsSnippetsinfoEveryspaceinside {} and () meansthatthisispushedintonextline:) $ representeachstepafter tab.TypeScript hasowncomponentsandownsnippets.Usesearchorjusttype ts beforeeverycomponentsnippet.I.E. t......
  • JavaScript 运算符表格
    JavaScript算数运算符算数运算符用于对数字执行算数运算:运算符描述+加法-减法*乘法/除法%取模(余数)++递加--递减JavaScript赋值运算符赋值运算符向JavaScript变量赋值。运算符例子等同于=x=yx=y+=x+=yx=x+......
  • 深入理解 JavaScript 单例模式及其应用
    引言在JavaScript开发中,设计模式是解决特定问题的有效手段。单例模式(SingletonPattern)是其中一种常见且有用的模式。尽管网上有许多关于单例模式的解释和实现,本篇将从实际工作中的需求出发,探讨如何更好地理解和应用单例模式,以编写更复用、更高效的代码。什么是单例模式?单例模......
  • 3.5 JavaScript——常用库
    jQuery更加方便控制前端组件和属性使用方式在<head>元素中添加:<scriptsrc="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>按jQuery官网提示下载选择器$(selector)类似于CSS选择器。例如:let$div=$('div');//通过jQuery获取div,$符号用......
  • 写好JavaScript条件语句的5条守则
    照抄https://juejin.im/post/5bdef288e51d450d810a89c6testEquals(fruit){if(fruit==='apple'||fruit==='strawberry'){console.log('==');}},testIncludes(fruit){constredFruits=['......
  • Fatal error: Call to undefined function mysql_connect() in …
    错误记录:Fatalerror:Calltoundefinedfunctionmysql_connect()in…错误原因:运行环境问题解决方案:你的PHP不支持mysql_connect()函数。PHP是一种模块化的设计,除了核心的内容,其他都是可选的。之所以不支持,是因为在编译PHP时没有加入对MYSQL数据库的支持。原因2:......
  • Web应用课 3.3 JavaScript——对象、数组、函数、类、事件
    对象英文名称:Object。类似于C++中的map,由key:value对构成。value可以是变量、数组、对象、函数等。函数定义中的this用来引用该函数的“拥有者”。eg.letperson={name:'zjq',age:18,money:100,friends:['yxc','Bob','Lucy'],//对象成员可以是数......
  • JavaScript操作BOM与DOM
    BOM操作window对象window对象是整个BOM的核心,表示浏览器打开的窗口。属性属性                              描述history     用户访问过的URL信息(历史记录)location        当前URL的信息。screen   ......