首页 > 专栏 > 前端 > 文章详情
理解 js 构造函数 发布于:2023-02-07 08:36:09   来源:长安城下翩翩少年   查看:109  讨论:0
一、函数。s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
首先弄明白何为函数,按照犀牛书的说法,函数简单说就是重复执行的代码块。s99易塔云建站-模板下载,web开发资源,技术博客
函数是这样一段JavaScript代码,它只定义一次,但可执行或调用任意次。s99易塔云建站-模板下载,web开发资源,技术博客
函数的定义方式:
s99易塔云建站-模板下载,web开发资源,技术博客
 
1.声明式:function 函数名(){}。这种定义方式,会将函数声明提升到函数所在作用域的最开头,也就是无论你在函数的最小作用域内使用该函数,只要在次作用域内,你都可以调用这个函数。
2.函数表达式:let fun = function(){};这种方式定义的函数,只能在该作用域中,这段赋值代码执行之后才能通过fun() 调用函数,否则,由于变量声明提升, fun === undefined。
3.new Function 形式:var fun1 = new Function(arg1, arg2, ..., argN, body);Function构造函数的所有参数都是字符串类型。除了最后一个参数,其他参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数,表示要创建函数的函数体。s99易塔云建站-模板下载,web开发资源,技术博客
 
总结:s99易塔云建站-模板下载,web开发资源,技术博客
 
1.第一种和第二种函数的定义方式其实是第三种new Function的语法糖,当我们定义函数到时候,都会通过new Function 来创建一个函数,只是前两种为我们进行了封装,我们看不见而已,js中任意函数都是Function的实例。
2.ECMA Script 定义的函数,实际上是功能完整的对象。
s99易塔云建站-模板下载,web开发资源,技术博客
二、构造函数。s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
定义:通过 new 函数名 来实例化对象的函数,叫构造函数。任何的函数都可以作为构造函数存在。之所有有构造函数和普通函数之分,主要从功能上进行区别的,构造函数的主要功能为初始化对象,特点是和new一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写。s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
对new的理解:new 申请内存,创建对象,当调用new时,后台会隐式执行 new Object() 创建对象。所以,通过new创建的字符串、数字时引用类型。
s99易塔云建站-模板下载,web开发资源,技术博客
1、常用的构造函数:
①、var arr = []    为   var arr = new Array();       的语法糖;s99易塔云建站-模板下载,web开发资源,技术博客
②、var obj = {}   为    var obj = new Object();   的语法糖;s99易塔云建站-模板下载,web开发资源,技术博客
③、var date = new Date();s99易塔云建站-模板下载,web开发资源,技术博客
④ 、...
2、执行构造函数时发生的步骤:
 
步骤:s99易塔云建站-模板下载,web开发资源,技术博客
a. let f = { } ;一个继承自 Foo.prototype 的对象被创建;s99易塔云建站-模板下载,web开发资源,技术博客
b-1. f.__proto__ = Foo.prototype // f 继承 Foo 的原型s99易塔云建站-模板下载,web开发资源,技术博客
b-2. Foo.call("zh", "18", "男") // 执行 Foo 函数,将参数传入,此时构造函数 Foo 内部的 this,为刚刚 new 创建的 f 对象,所以 f.name = "zh", f.age = "18", f.sex = '男's99易塔云建站-模板下载,web开发资源,技术博客
c. 实例化对象完成,此时 f = {name: "zh", age: "18", sex: "男"}s99易塔云建站-模板下载,web开发资源,技术博客
d. f.belief() 打印s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
手写 new 函数
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
注意:当构造函数有返回对象的时候,最终 new 出来的对象,时内部构造函数的返回值,而不是new过程创建的对象;仅当构造函数返回值时对象时有效,当不是对象时,依旧返回 new 过程中生成的对象,所以无论如何,new过程都会返回一个对象。s99易塔云建站-模板下载,web开发资源,技术博客
 
三、ES6 中 class 与 构造函数的关系。s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
class 为 构造函数的语法糖,即 class 的本质时构造函数。class 的 继承 extends 本质上是 构造函数的 原型链 的继承。s99易塔云建站-模板下载,web开发资源,技术博客
例如,类的写法:
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
构造函数的写法:s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
s99易塔云建站-模板下载,web开发资源,技术博客
总结:通过 class 定义的类和通过 构造函数 定义的类本质上相同。并且在js执行时,会将 第一种 转换为 第二种 执行,所以 ES6 class 的写法,实质就是构造函数。

评论

  • 匿名