网站的站外优化,wordpress是mvc架构吗,楼市房价最新消息,折800 网站模板✨ 专栏介绍
在现代Web开发中#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言#xff0c;JavaScript具有广泛的应用场景#x…✨ 专栏介绍
在现代Web开发中JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言JavaScript具有广泛的应用场景并且不断发展演进。在本专栏中我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外我们还将介绍ES6及其后续版本中引入的新特性如箭头函数、模块化、解构赋值等。通过学习这些内容你将能够成为一名熟练的JavaScript开发者并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧 文章目录 ✨ 专栏介绍引言new关键字的介绍new关键字的原理new关键字的代码示例new个对象呗new.target结论 写在结尾前端设计模式专栏Vue专栏JavaScriptES6专栏 引言
在JavaScript中new是一个非常重要的关键字它用于创建对象实例。虽然new看起来很简单但它背后隐藏着一些复杂的原理和机制。本文将深入解析JavaScript中的new关键字介绍其作用、原理并提供一些代码示例来帮助读者更好地理解。 new关键字的介绍
在JavaScript中new是一个用于创建对象实例的关键字。当使用new关键字调用一个函数时它会执行以下操作
创建一个空的简单 JavaScript 对象即 {} 为步骤 1 新创建的对象添加属性 __proto__ 将该属性链接至构造函数的原型对象将步骤 1 新创建的对象作为 this 的上下文如果该函数没有返回对象则返回 this。
语法
new constructor[([arguments])]参数 constructor 一个指定对象实例的类型的类或函数。 arguments 一个用于被 constructor 调用的参数列表。
创建一个用户自定义的对象需要两步
通过编写函数来定义对象类型。通过 new 来创建对象实例。
new关键字的原理
为了更好地理解new关键字背后的原理我们可以手动实现一个简化版的new操作符。下面是一个示例代码
function myNew(constructor, ...args) {// 创建一个空对象const obj {};// 将空对象的原型指向构造函数的prototype属性Object.setPrototypeOf(obj, constructor.prototype);// 将构造函数内部的this指向这个空对象const result constructor.apply(obj, args);// 如果构造函数返回了一个对象则返回该对象否则返回新创建的对象return typeof result object result ! null ? result : obj;
}通过上述代码我们可以手动实现一个类似于new关键字的操作。
首先我们创建一个空对象obj并将其原型指向构造函数的prototype属性。
然后我们将构造函数内部的this指向这个空对象并执行构造函数内部的代码。最后根据构造函数的返回值决定返回新创建的对象还是该返回值。
new关键字的代码示例
下面是一个使用new关键字创建对象实例的示例代码
function Person(name, age) {this.name name;this.age age;
}Person.prototype.sayHello function() {console.log(Hello, my name is ${this.name} and Im ${this.age} years old.);
}const john new Person(John, 25);
john.sayHello(); // 输出Hello, my name is John and Im 25 years old.在上述示例中我们定义了一个Person构造函数并在其原型上添加了一个sayHello方法。
然后通过使用new关键字调用Person构造函数来创建一个名为john的Person实例。最后我们调用john实例上的sayHello方法来输出一段问候语。
new个对象呗
function Boyfriend(name, age) {this.name name;this.age age;this.gender male;this.isCool true;
}function Girlfriend(name, age) {this.name name;this.age age;this.gender female;this.isBeautiful true;
}const john new Boyfriend(John, 25);
const lisa new Girlfriend(Lisa, 23);console.log(john); // 输出Boyfriend { name: John, age: 25, gender: male, isCool: true }
console.log(lisa); // 输出Girlfriend { name: Lisa, age: 23, gender: female, isBeautiful: true }在上述示例中我们定义了两个构造函数Boyfriend和Girlfriend。
这两个构造函数分别用于创建男朋友和女朋友的对象实例。
每个构造函数都接受名字和年龄作为参数并在对象实例中设置相应的属性如姓名、年龄、性别和是否正帅气或者漂亮。通过使用new关键字调用这两个构造函数我们可以分别创建一个名为john的男朋友对象和一个名为lisa的女朋友对象。最后我们打印出这两个对象实例可以看到它们分别具有相应的属性值。
new.target
new.target是一个在构造函数内部可用的元属性meta property它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用。
下面是一些关于new.target的详细介绍 使用方式 在构造函数内部可以通过访问new.target来获取正在被构造的实例的构造函数。如果构造函数是通过new关键字被调用那么new.target将指向该构造函数本身。如果构造函数是直接调用而不是通过new关键字那么new.target将为undefined。 功能 可以使用new.target来执行一些特定于构造函数调用的逻辑。例如可以根据是否使用了new关键字来决定是否执行某些初始化操作。可以使用new.target来实现基于类的继承。在派生类中可以通过super关键字和new.target来访问父类的构造函数。
下面是一个示例代码演示了如何使用new.target
function Person(name) {if (typeof new.target undefined) {throw new Error(Person must be instantiated using new);}this.name name;
}function Student(name, grade) {Person.call(this, name);this.grade grade;
}Student.prototype Object.create(Person.prototype);
Student.prototype.constructor Student;const john new Person(John); // 正常调用创建一个Person实例
console.log(john.name); // 输出Johnconst lisa new Student(Lisa, 10); // 正常调用创建一个Student实例
console.log(lisa.name); // 输出Lisa
console.log(lisa.grade); // 输出10const mark Person.call({}, Mark); // 错误调用没有使用new关键字在上述示例中我们定义了一个Person构造函数和一个Student构造函数。
在Person构造函数内部我们使用new.target来检查是否使用了new关键字。如果没有使用new关键字则抛出一个错误。
在Student构造函数中我们通过调用Person.call(this, name)来调用父类的构造函数并传递相应的参数。然后我们通过Object.create和prototype链来实现基于类的继承。
结论
本文深入解析了JavaScript中的new关键字介绍了其作用、原理并提供了一些代码示例来帮助读者更好地理解。通过对new关键字的详细解析我们可以更好地理解JavaScript中对象实例的创建过程从而更加灵活地运用new关键字来构建复杂的应用程序。
new.target是一个在构造函数内部可用的元属性它提供了一个指向正在被构造的实例的构造函数的引用。它可以用来确定构造函数是通过new关键字被调用还是直接调用并且可以执行特定于构造函数调用的逻辑或实现基于类的继承。 写在结尾
前端设计模式专栏 设计模式是软件开发中不可或缺的一部分它们帮助我们解决了许多常见问题并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中我们介绍了所有的前端设计模式包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式并将其应用于实际项目中我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式写出高质量的代码。点击订阅前端设计模式专栏
Vue专栏 Vue.js是一款流行的JavaScript框架用于构建用户界面。它采用了MVVMModel-View-ViewModel的架构模式通过数据驱动和组件化的方式使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面并探索其强大的生态系统如Vue Router和Vuex、Pinia。通过学习这些内容你将能够成为一名熟练的Vue.js开发者并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏
JavaScriptES6专栏 JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点是构建现代Web应用程序的重要工具之一。在这个专栏中我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外我们还将介绍ES6ECMAScript 2015及其后续版本中引入的新特性如箭头函数、模块化、解构赋值等。通过学习这些内容你将能够成为一名熟练的JavaScript开发者并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScriptES6专栏
