标签： 构造函数

发布于

解释 `JavaScript` 中的 `Callable Constructors` (提案) 如何允许函数作为构造函数，并探讨其与 `NewTarget` 的关系。

各位观众，欢迎来到今天的“JavaScript 冷知识大赏”！我是你们的老朋友，Bug Hunter。今天我们要聊的是一个比较前沿，甚至可能有些朋友都没听说过的东西——Callable Constructors提案。 我知道，听到“构造函数”这几个字，大家可能已经开始头大了。别怕，今天我们尽量用最轻松的方式，把这个概念给捋顺了。 开场白：构造函数的那些事儿 在JavaScript的世界里，new 操作符就像一个魔法棒，可以把一个普通函数变成“构造函数”，然后用它来创建对象。例如： function Person(name) { this.name = name; this.sayHello = function() { console.log(`Hello, my name is ${this.name}`); }; } const john = new Person(“John”); john.sayHello(); // 输出: Hello, my name is John 这段代码大家肯定很熟悉了。Person 函数通过 new 操作符，摇身一变，成了构造函数。john 则是通过 …

继续阅读“解释 `JavaScript` 中的 `Callable Constructors` (提案) 如何允许函数作为构造函数，并探讨其与 `NewTarget` 的关系。”

发布于

JS `super` 关键字：调用父类构造函数或方法

各位观众老爷，大家好！欢迎来到今天的“JS super 关键字：祖传秘方，一代更比一代强”技术讲座。今天咱们就来扒一扒 JavaScript 里的 super 关键字，看看它到底是个什么来头，怎么用才能让我们的代码更优雅、更强大。准备好了吗？发车啦！ 第一章：super 是什么？它从哪儿来？ 要理解 super，首先要明白 JavaScript 的原型继承机制。简单来说，就是子类可以继承父类的属性和方法。super 关键字，就是用来访问和调用父类上的属性和方法的。你可以把它想象成一个“祖传秘方”，子类可以通过 super 来获取父类的秘方，然后在此基础上进行创新和发展。 在 ES5 中，继承是通过原型链来实现的，代码看起来比较复杂。ES6 引入了 class 关键字，让 JavaScript 的继承语法更接近于其他面向对象语言。super 关键字也是在 ES6 中引入的，它简化了子类访问父类成员的方式。 第二章：super()：调用父类构造函数 super() 最常见的用法就是在子类的构造函数中调用父类的构造函数。这是必须的！如果子类有构造函数，并且使用了 this 关键字，那么必须先 …

继续阅读“JS `super` 关键字：调用父类构造函数或方法”

发布于

JS `new.target`：在构造函数中检测是否通过 `new` 调用

各位观众，晚上好！欢迎来到今天的JavaScript奇妙夜，我是你们的老朋友，BUG终结者！今天我们要聊点刺激的——new.target，一个能让你在构造函数里像柯南一样，一眼识破“凶手”是否用了new关键词的秘密武器。准备好了吗？咱们开始！ 第一幕：构造函数的困境 在JavaScript的世界里，构造函数扮演着创造对象的关键角色。但是，它们有个小小的烦恼：它们可以被当成普通函数调用，而这往往不是我们希望的。 function Person(name) { this.name = name; console.log(“Hi, I’m ” + this.name); } Person(“Alice”); // 哎呀！全局对象被污染了！(严格模式下会报错) let bob = new Person(“Bob”); // 这才是正道！ 看出问题了吗？当我们直接调用Person(“Alice”)时，this指向了全局对象（在浏览器里是window），导致全局变量被意外修改。这简直就是一场灾难！ 那么问题来了：我们怎么在构造函数内部判断，它到底是被new调用的，还是被当成普通函数调用的呢？ 第二 …

继续阅读“JS `new.target`：在构造函数中检测是否通过 `new` 调用”

发布于

JS 构造函数 (`constructor`) 与 `super()`：继承中的初始化流程

各位观众，各位朋友，大家好！我是今天的主讲人，很高兴能和大家一起聊聊JavaScript构造函数(constructor)和super()这对好基友，以及它们在继承中扮演的关键角色。这俩哥们，一个负责创建对象，一个负责“继承遗产”，可谓是强强联合，缺一不可。 咱们今天的内容，将深入浅出，保证大家听完之后，不仅能理解，还能熟练运用，从此告别继承中的各种“坑”。 一、构造函数：对象的“出生证明” 首先，咱们得搞清楚啥是构造函数。说白了，构造函数就是一个用来创建对象的函数。在JavaScript中，任何函数都可以当做构造函数来使用。但是，为了区分普通函数和构造函数，我们通常会约定俗成地使用大写字母开头来命名构造函数。 function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log(`你好，我是${this.name}，今年${this.age}岁。`); }; } // 使用new关键字调用构造函数，创建对象 const person1 = new Per …

继续阅读“JS 构造函数 (`constructor`) 与 `super()`：继承中的初始化流程”

发布于

JS 箭头函数不能作为构造函数：理解其设计意图

各位观众，掌声欢迎来到“箭头函数漫谈”现场！今天咱们聊点轻松但重要的，那就是箭头函数为啥不能当构造器使唤。 开场白：箭头函数，你是谁？ 话说JavaScript世界里，函数可是个顶顶重要的角色。它就像个万能工具，能封装代码、传递数据、创建对象……简直无所不能。但随着ES6（ECMAScript 2015）的到来，函数家族里多了个新成员——箭头函数。 // 传统函数 function add(a, b) { return a + b; } // 箭头函数 const addArrow = (a, b) => a + b; 箭头函数简洁明了，语法糖分十足，一下子俘获了不少程序员的心。但是，用着用着，大家发现了个奇怪的现象：箭头函数不能像传统函数那样，用 new 关键字来创建对象。 const Person = (name) => { this.name = name; // 试图给 this 赋值 }; // 尝试用 new 关键字 const john = new Person(“John”); // 💥 TypeError: Person is not a construc …

继续阅读“JS 箭头函数不能作为构造函数：理解其设计意图”

发布于

构造函数与原型：`new` 操作符的执行过程

好的，各位未来的代码大师们，欢迎来到今天的“构造函数与原型：new 操作符的奥秘”讲座！我是你们的向导，今天就带你们拨开 JavaScript 中 new 操作符的迷雾，揭开构造函数和原型链的神秘面纱。 准备好了吗？让我们开始这场精彩的代码探险吧！🚀 开场白：new，你这磨人的小妖精！ 在 JavaScript 的世界里，new 操作符就像一个磨人的小妖精，它常常让新手们感到困惑。你可能会想：“它到底做了些什么？为什么我有时候用 new 创建的对象能调用某些方法，有时候又不行？构造函数和原型到底是什么关系？” 别担心！今天，我们就来彻底驯服这只小妖精，让它乖乖听话，为你所用。 第一幕：什么是构造函数？ 首先，我们要明确一个概念：构造函数。 在 JavaScript 中，任何函数都可以作为构造函数使用。但通常，我们会将那些用来创建特定类型对象的函数称为构造函数。 想象一下，你是一位建筑师，构造函数就是你的蓝图，而通过 new 操作符，你就能根据蓝图建造出一栋栋房子（对象）。 function Person(name, age) { this.name = name; this.age = …

继续阅读“构造函数与原型：`new` 操作符的执行过程”