JavaScript知识:构造函数也是函数
目录
- 1、构造函数的定义与调用
- 2、new关键字的用途
- 3、构造函数的问题：浪费内存
- 总结
首先要明确的是构造函数也是函数
我经常使用构造函数来创建实例对象，例如对象和数组的实例化可以通过相应的构造函数Object()和Array()完成。
构造函数与普通函数在语法的定义上没有任何区别，主要的区别体现在以下3点。
(1)构造函数的函数名的第一个字母通常会大写。按照惯例，构造函数名称的首字母都是要大写的，非构造函数则以小写字母开头。这是从面向对象编程语言那里借鉴的，有助于在ECMAScript中区分构造函数和普通函数。
(2)在函数体内部使用this关键字，表示要生成的对象实例，构造函数并不会显式地返回任何值，而是默认返回“this”。在下面的代码段中，Person()函数并没有使用return关键字返回任何信息，但是输出的变量person1是一个具有name、age属性值的Person实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.定义构造函数
function Person(name,age){
this.age = age;
this.name = name;
this.sayName = function(){
console.log(this.name);
}
}
// 2.生成实例对象
var person1 = new Person('小苏','18');
// 3.打印实例对象
console.log(person1);
</script>
</body>
</html>
显示效果如下
(3)作为构造函数调用时，必须与new操作符配合使用。这一点非常重要，任何函数只要使用new操作符调用就是构造函数，而不使用new操作符调用的函数就是普通函数。
1、构造函数的定义与调用
构造函数又称为自定义函数，以函数的形式为自己的对象类型定义属性和方法。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.定义构造函数
function Person(name,age){
this.age = age;
this.name = name;
this.sayName = function(){
console.log(this.name);
}
}
// 2.生成实例对象
var person1 = new Person('小苏','18');
// 3.调用方法
person1.sayName();
</script>
</body>
</html>
2、new关键字的用途
构造函数在执行时，会执行以下4步：
- 通过new关键字（操作符）创建实例对象，会在内存中创建一个新的地址。
- 为构造函数中的this确定指向，指向实例的本身。
- 执行构造函数代码，为实例添加属性。
- 返回这个新创建的对象。
以前面生成person1实例的代码为例。
第一步：为person1实例在内存中创建一个新的地址。
第二步：确定person1实例的this指向，指向person本身。
第三步：为person1实例添加name、age和sayName属性，其中sayName属性值是一个函数。
第四步：返回这个person1实例。
举个实例
var person1 = new Person("Bob", 18);
这行代码，等价于
// 演示 new 的功能
function Person(name,age) {
// 1.创建一个新对象
var instance = new Object();
// 2.将函数内部的 this 指向了这个新对象
this = instance;
// 3.执行构造函数内部的代码
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
// 4.将新对象作为返回值
return instance;
}
这就意味着，将instance 赋值给 person1，即person1 = instance。实际上又是这样的：
// 演示 new 的功能
function Person(name,age) {
// 1.创建一个新对象
var person1 = new Object();
// 2.将函数内部的 this 指向了这个新对象
this = person1;
// 3.执行构造函数内部的代码
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
// 4.将新对象作为返回值
return person1;
}
3、构造函数的问题：浪费内存
基本事实：不同实例中的sayName属性是不同的。举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.自定义构造函数
function Person(name,age) {
this.name = name;
this.age = age;
// this 内部的 type 属性值是不变的
this.type = "human";
// 每个对象的 sayName 方法也是一样的
this.sayName = function () {
console.log(this.name);
};
}
var person1 = new Person('Bob',18);
var person2 = new Person('Mike',20);
// 2，判断各自的方法是否是同一个函数
console.log(person1.sayName === person2.sayName); // false
</script>
</body>
</html>
解释：通过console.log(person1.sayName === person2.sayName)方法可判断两个函数是否是是同一个，显然这不是同一个函数，那么两个函数就占用了两个内存空间，就会造成内存的浪费。
那如何解决函数占用内存的办法呢？答案是将对象内部函数提取出来作为公共函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 解决方法1： 将公共的函数提取到构造函数之外
function sayName() {
console.log(this.name);
}
function sayAge() {
console.log(this.age);
}
//1.自定义对象
function Person(name,age) {
this.name = name;
this.age = age;
// this 内部的 type 属性值是不变的
this.type = "human";
// 每个对象的 sayName 方法也是一样的
this.sayName = sayName;
this.sayAge = sayAge;
}
//2.实例化对象
var person1 = new Person('Bob',18);
var person2 = new Person('Mike',20);
console.log(person1.sayName === person2.sayName); // true
</script>
</body>
</html>
此时，也存在一个问题，如果有多个公共函数，需要在外部创建多个函数，可能会造成命名冲突
解决办法，将多个公共的函数封装到一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 3.将多个公共的函数封装到一个对象
var fns = {
sayName : function () {
console.log(this.name);
},
sayAge : function () {
console.log(this.age);
}
};
// 1.自定义对象
function Person(name,age) {
this.name = name;
this.age = age;
this.type = "human";
this.sayName = fns.sayName;
this.sayAge = fns.sayAge;
}
// 2.生成对象实例
var person1 = new Person("Bob",18);
var person2 = new Person("Mike",20);
// person1.sayName();
console.log(person1.sayName === person2.sayName);
console.log(person1.sayAge === person2.sayAge);
</script>
</body>
</html>
解释：将多个函数封装成一个对象即可解决函数名可能冲突的问题。
通过这种设置全局访问的函数，这样就可以被所有实例访问到，而不用重复创建。
但是这样也会存在一个问题，如果为一个对象添加的所有函数都处理成全局函数，这样并无法完成对一个自定义类型对象的属性封装（言外之意。指的是全局函数只可以封装函数，但无法封装属性，因为属性封装在函数外面，要定义为全局变量，才可以去调用，这反而会污染全局变量），因此这不是一个好的解决办法。
此时，便引用原型的概念，使用原型概念可以很好解决这个问题，可以很好解决这个问题。
总结
本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！
相关推荐
-
浅谈JavaScript中你可能不知道URL构造函数的属性
URL URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它, 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点 例如,这里是这篇博客文章的路径: https://www.vipbic.com/thread.html?id=101 通常您需要访问 URL 的特定属性.这些可能是主机名(例如 vipbic
-
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
本文实例讲述了JavaScript 面向对象程序设计.分享给大家供大家参考,具体如下: 类的创建于实例对象 工厂模型创建对象 function CreatePerson ( name,sex,age ) { var obj = new Object(); obj.name = name; obj.sex = sex; obj.age = age; obj.sayName = function () { console.log( this.name ); } return obj; } var p
-
JS Object构造函数之Object.freeze
概述 Object.freeze(obj)可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已经属性,不能修改该对象已有属性的可枚举性.可配置性.可写性.以及不能修改已有属性的值. 此外,冻结一个对象后该对象的原型也不能被修改.freeze()返回和传入的参数是相同的对象. JavaScriptDemo: Object.freeze() const obj = { prop:42 } Object.freeze(obj) obj.prop =
-
JavaScript构造函数原理及实现流程解析
在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: 1.什么是构造函数 2.构造函数用来做什么 3.构造函数的执行过程 4.构造函数的返回值 1.所以首先我们需要知道什么是构造函数: 在我看来,构造函数具有两个特点可以判断是否为构造函数: 1.当函数名为首字母大写时,这个是一个可以大概判断构造函数与普通函数的一个特点,但是不是绝对正确,因为普通函数也可以是大写字母开头 2.当我们需要调用构造函数时我们需要new <构造函数>,也就是产生一个实例化对象. function Studen
-
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age
-
JavaScript知识:构造函数也是函数
目录 1.构造函数的定义与调用 2.new关键字的用途 3.构造函数的问题:浪费内存 总结 首先要明确的是构造函数也是函数 我经常使用构造函数来创建实例对象,例如对象和数组的实例化可以通过相应的构造函数Object()和Array()完成. 构造函数与普通函数在语法的定义上没有任何区别,主要的区别体现在以下3点. (1)构造函数的函数名的第一个字母通常会大写.按照惯例,构造函数名称的首字母都是要大写的,非构造函数则以小写字母开头.这是从面向对象编程语言那里借鉴的,有助于在ECMAScript中区
-
javascript设计模式之对象工厂函数与构造函数详解
下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识. 概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象.1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript还提
-
JavaScript中字面量与函数的基本使用知识
JavaScript 字面量 在编程语言中,一个字面量是一个常量,如 3.14. 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e). 3.14 1001 123e5 字符串(String)字面量 可以使用单引号或双引号 be written with double or single quotes: "John Doe" 'John Doe' 表达式字面量 用于计算: 5 + 6 5 * 10 数组(Array)字面量 定义一个数组: [40, 100, 1, 5
-
Javascript基础知识盲点总结之函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.本文重点给大家介绍js基础知识盲点总结之函数. 一.函数中的arguments对象 每个函数内部都有一个arguments,它能返回函数所接受的所有参数 注意:argumens接收的是实参 如下是利一个利用arguments特性编写的求和函数: function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I <
-
详解Javascript 中的 class、构造函数、工厂函数
到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol
-
JavaScript前端实用的工具函数封装
目录 1.webpack里面配置自动注册组件 2.自定义指令图片懒加载 3.图片文件转base64格式(实现预览) 4.数组转为tree型结构(递归实现) 5.递归深拷贝 6.将数组里面的对象转换成我们需要的键值对 1.webpack里面配置自动注册组件 第一个参数是匹配路径,第二个是深度匹配,第三个是匹配规则 const requireComponent = require.context('./libary', true, /\.vue$/) export default { install
-
深入理解javascript中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.
-
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
本文实例讲述了javascript数组对象常用api函数.分享给大家供大家参考,具体如下: 1. concat() 连接两个或多个数组,并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a); //[1,2,3] console.log(b); //[1,2,3,6,7] 2. join(str) 把数组的所有元素用str分隔,默认逗号分隔 var a = [1,2,3] var b = a.join('|'); console.
-
JavaScript验证电子邮箱的函数
本文介绍一个JavaScript验证电子邮箱的函数,相当靠谱. JavaScript验证电子邮箱的函数,源代码如下: function checkEmail(text) { if( text.match(/qq\.com$/) ) { return -1; } if( ! text.match(/^\w+([._-]\w+)*@(\w+\.)+\w+$/) ) { return false; } return true; } 关于JavaScript验证电子邮箱的函数,本文就介绍这么多,希望对您
-
Javascript面试经典套路reduce函数查重
今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了reduce这个方法,网上查了查,没有查到什么有价值的东西,导致浪费了我一些时间才看懂,现将我的思路整理如下: 原代码: var arr="qweqrq" var info= arr.split('').reduce((a,b)=> (a[b]++ || (a[b]=1),a) ,{}) console.log(info) 代码思路是这样的,先将字符串arr通过split方法切