理解 js 构造函数 - 易塔云建站-模板下载,web开发资源,技术博客

理解 js 构造函数发布于：2023-02-07 08:36:09 来源：长安城下翩翩少年查看：109 讨论：0

一、函数。

首先弄明白何为函数，按照犀牛书的说法，函数简单说就是重复执行的代码块。
函数是这样一段JavaScript代码，它只定义一次，但可执行或调用任意次。
函数的定义方式：

1.声明式：function 函数名(){}。这种定义方式，会将函数声明提升到函数所在作用域的最开头，也就是无论你在函数的最小作用域内使用该函数，只要在次作用域内，你都可以调用这个函数。

2.函数表达式：let fun = function(){}；这种方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun() 调用函数，否则，由于变量声明提升， fun === undefined。

3.new Function 形式：var fun1 = new Function(arg1, arg2, ..., argN, body)；Function构造函数的所有参数都是字符串类型。除了最后一个参数，其他参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数，表示要创建函数的函数体。

总结：

1.第一种和第二种函数的定义方式其实是第三种new Function的语法糖，当我们定义函数到时候，都会通过new Function 来创建一个函数，只是前两种为我们进行了封装，我们看不见而已，js中任意函数都是Function的实例。

2.ECMA Script 定义的函数，实际上是功能完整的对象。

二、构造函数。

定义：通过 new 函数名来实例化对象的函数，叫构造函数。任何的函数都可以作为构造函数存在。之所有有构造函数和普通函数之分，主要从功能上进行区别的，构造函数的主要功能为初始化对象，特点是和new一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写。

对new的理解：new 申请内存，创建对象，当调用new时，后台会隐式执行 new Object() 创建对象。所以，通过new创建的字符串、数字时引用类型。

1、常用的构造函数：

①、var arr = [] 为 var arr = new Array(); 的语法糖；
②、var obj = {} 为 var obj = new Object(); 的语法糖；
③、var date = new Date();
④ 、...

2、执行构造函数时发生的步骤：

步骤：
a. let f = { } ；一个继承自 Foo.prototype 的对象被创建；
b-1. f.__proto__ = Foo.prototype // f 继承 Foo 的原型
b-2. Foo.call("zh", "18", "男") // 执行 Foo 函数，将参数传入，此时构造函数 Foo 内部的 this，为刚刚 new 创建的 f 对象，所以 f.name = "zh", f.age = "18", f.sex = '男'
c. 实例化对象完成，此时 f = {name: "zh", age: "18", sex: "男"}
d. f.belief() 打印

手写 new 函数

注意：当构造函数有返回对象的时候，最终 new 出来的对象，时内部构造函数的返回值，而不是new过程创建的对象；仅当构造函数返回值时对象时有效，当不是对象时，依旧返回 new 过程中生成的对象，所以无论如何，new过程都会返回一个对象。

三、ES6 中 class 与构造函数的关系。

class 为构造函数的语法糖，即 class 的本质时构造函数。class 的继承 extends 本质上是构造函数的原型链的继承。
例如，类的写法：

构造函数的写法：

总结：通过 class 定义的类和通过构造函数定义的类本质上相同。并且在js执行时，会将第一种转换为第二种执行，所以 ES6 class 的写法，实质就是构造函数。

上一篇：记一次面试：判断数据类型时数组还是对象（typeof constructor toString instanceof）下一篇：理解：js中构造函数与原型的对应关系

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友