浅析JS构造函数
构造函数(Constructor Function)是 JavaScript 中创建对象的一种重要方式,它不仅让我们能够创建具有相似属性和方法的对象,还能充分利用 JavaScript 的原型继承机制,实现代码的高效复用。本文将深入探讨构造函数的原理、使用方法、与类的关系,以及一些高级用法和注意事项。
构造函数的基本原理
构造函数本质上是一个普通的函数,但有以下几点特征使其区别于其他函数:
- 命名约定:构造函数通常以大写字母开头,以便与普通函数区分开来。
- 使用
new关键字:构造函数必须与new关键字一起调用,这样才能创建一个新的对象实例。 this绑定:在构造函数内部,this关键字指向新创建的对象实例。
构造函数的使用方法
下面是一个简单的构造函数示例,用于创建 Person 对象:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
}
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.
在这个例子中,Person 构造函数为每个实例创建了 name 和 age 属性,以及一个 sayHello 方法。
构造函数与原型
每个函数在创建时,都会有一个 prototype 属性,这个属性是一个对象,包含了该构造函数实例共享的属性和方法。利用原型对象,我们可以避免在每次创建实例时都重新定义方法,从而节省内存。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.
console.log(person1.sayHello === person2.sayHello); // 输出: true
通过将 sayHello 方法添加到 Person.prototype,我们确保了所有 Person 实例共享同一个 sayHello 方法,而不是为每个实例创建一个新的方法。
构造函数与类(Class)
ES6 引入了类(class)语法,使得定义构造函数和原型方法更加简洁和易读。类实际上是构造函数的语法糖,本质上还是使用了原型机制。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.
类的定义使得构造函数和原型方法的语法更加直观,减少了理解和维护的难度。
高级用法与注意事项
1. 使用 Object.create 进行继承
构造函数和原型可以结合 Object.create 方法实现继承:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name, breed) {
Animal.call(this, name); // 调用父构造函数
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log(`${this.name} barks.`);
};
const dog = new Dog('Rex', 'Labrador');
dog.speak(); // 输出: Rex barks.
通过 Object.create 方法,我们可以创建一个新的对象,并将其原型设置为指定的对象,从而实现继承。
2. 静态方法
构造函数也可以定义静态方法,静态方法是直接绑定在构造函数上的,而不是实例对象上:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.isAdult = function(age) {
return age >= 18;
};
console.log(Person.isAdult(20)); // 输出: true
console.log(Person.isAdult(16)); // 输出: false
在 ES6 类语法中,可以使用 static 关键字定义静态方法:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
static isAdult(age) {
return age >= 18;
}
}
console.log(Person.isAdult(20)); // 输出: true
console.log(Person.isAdult(16)); // 输出: false
浅析JS构造函数的更多相关文章
- 浅析JS中的模块规范(CommonJS,AMD,CMD)////////////////////////zzzzzz
浅析JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. ...
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...
- 谈谈JS构造函数
//构造函数 //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 //当对象被实例化后,构造函数会立即执行它所包含的任何代码 function myObject(msg) ...
- Class和普通js构造函数的区别
Class 在语法上更加贴合面向对象的写法 Class 实现继承更加易读.易理解 更易于写 java 等后端语言的使用 本质还是语法糖,使用 prototype Class语法 typeof Math ...
- js 构造函数 & 静态方法 & 原型 & 实例方法
js 构造函数 & 静态方法 & 原型 & 实例方法 ES5 "use strict"; /** * * @author xgqfrms * @licens ...
- 深入研究js构造函数和原型
很快就要从新浪离职了,最近心情比较轻松,抽点空整理一下构造函数和原型的机理. 我们都知道,在经典设计模式中我们最常用的就是工厂模式.构造函数模式.原型模式这几种,听起来‘模式’好像很高大上的样子,实际 ...
- js构造函数,索引数组和属性的属性
本文主要介绍和小结js的构造函数,关联数组的实现方式和使用,及不可变对象和它的实现方式及他们使用过程中要注意的点 <script> function p(){ var len=argume ...
- JS构造函数原理与原型
1.创建对象有以下几种方式: ①.var obj = {}; ②.var obj = new Object(); ③.自定义构造函数,然后使用构造函数创建对象 [构造函数和普通函数的区别:函数名遵循大 ...
- js 构造函数(construction)与原型(prototype)
1.面向对象:js原型 java有class和instance,js仅仅有构造函数(function Cat(name,age){this.name=name;this.age=age}),为了实现数 ...
- JS构造函数、对象工厂、原型模式
1.对象创建的3中方法 1.1.对象字面量 var obj = { name: "mingzi", work: function () { console.log("wo ...
随机推荐
- C# 记一次对chm帮助文档的信息提取
事情时这样,有用友u8的字典数据的帮助文档一份,同事需要把里面的很多张表的字典信息给提取出来,然后构成sql语句,插入数据库.字典就是一张对表里的字段的一个说明,长这样 同事一开始是手动复制到exce ...
- WPF ListBox 控件绑定 Binding
当我们需要用到循环的列表内容,并且模板化程度高的时候,建议使用 ListBox 来做绑定.XAML: <Window.DataContext> <local:VMTempTest/& ...
- Hugging Face x LangChain: 全新 LangChain 合作伙伴包
我们很高兴官宣发布 langchain_huggingface ,这是一个由 Hugging Face 和 LangChain 共同维护的 LangChain 合作伙伴包.这个新的 Python 包旨 ...
- 8.16考试总结(NOIP模拟41)[你相信引力吗·marshland·party?·半夜]
美丽的不是这个世界,而是看世界的你的眼神. T1 你相信引力吗 解题思路 好像只有我一个人没有看出来这个题是单调栈(现在一看区间问题就是双指针,线段树) 维护一个单调递减的栈. 我们把最大值放到左端点 ...
- 16位简单ASM题的记录——[HGAME 2022 week1]easyasm
第一次遇见16位,和纯看汇编的题目,记录一下 DIE 16位,IDA用32位或者64位都可以打开 IDA 主要汇编部分 seg003:0000 ; =============== S U B R O ...
- 代码审计——基础(JAVAWEB)
JAVAWEB 目录 JAVAWEB Servlet技术 JavaWeb概述 Servelt与Servlet容器 Servlet概念 Tomcat Web程序结构 Servlet容器响应客户请求的过程 ...
- Visual Studio(VS)常用快捷键整理
前言 在使用Visual Studio编写代码时,使用快捷键能够提高编码效率,作为程序员,我们有必要记住一些比较常用的快捷键.这篇文章将记录我自己比较常用的快捷键,并根据我的使用情况,更新常用快捷 ...
- realtek高清晰音频管理器 WIN10
在WIN10里已经改名了: Realtek Audio Console . 在安装realtek声卡驱动后,Realtek Audio Console 会自动安装.
- vue中手写table的升降序
有些时候,我们总是无可避免的需要自己去手撸一些东西,因为需求总是在不断的变化.例如,最开始的需求,我们只是在首页展示一个数据列表,此时,我们可能直接就自己手写了一个table,后来,突然增加了一个需求 ...
- 【动手学深度学习】第五章笔记:层与块、参数管理、自定义层、读写文件、GPU
为了更好的阅读体验,请点击这里 由于本章内容比较少且以后很显然会经常回来翻,因此会写得比较详细. 5.1 层和块 事实证明,研究讨论"比单个层大"但"比整个模型小&quo ...