• 【每日十分钟前端】基础篇19,普通函数、箭头函数、构造函数的区别


    【JS】普通函数、箭头函数、构造函数的区别


    普通函数、箭头函数、构造函数

    函数、普通函数、构造函数

    函数隶属于对象,据有[[Call]]属性的对象都为“function”(typeof判断类型的关键);
    函数对象支持[[Call]][[Construct]]

    每个构造函数必须是一个函数对象,想要对某个对象使用new,就得确保对象据有[[Construct]],每个支持[[Construct]]的对象必须支持[[Call]]

    构造函数与普通函数区别

    调用方式不同,普通函数直接调用,构造函数用new调用
    作用不一样,构造函数用来创建新的实例对象
    this指向不同,普通函数指向window,构造函数this指向它创建的实例对象

    箭头函数

    箭头函数没有[[Construct]],不能使用new关键字,不能用作构造函数。
    设计者想设计一种简短且不绑定this的函数,所以不让箭头函数具有[[Construct]]方法。
    箭头函数中的 this、super、arguments 及 new.target 这些值由外围最近一层非箭头函数决定。

    箭头函数特点,与普通函数的区别

    (1)、语法更简洁
    (2)、箭头函数不会创建自己的this,它的this指向定义时外层执行环境的this,箭头函数中this的指向在它被定义的时候就已经确定了,之后永远不变。
    (3)、箭头函数继承而来的this,永远不变。
    (4)、.call().apply().bind()无法改变箭头函数的this指向
    (5)、箭头函数不能作为构造函数使用。
    (6)、箭头函数没有自己的arguments。
    (7)、箭头函数没有原型prototype,let a=()=>{} //a.prototype 是 undefined
    (8)、箭头函数不能用作Generator函数,不能使用yeild关键字

    补充:

    函数的创建

    函数直接声明
    function fname(){}

    函数表达式声明
    let fname = function(){}
    这样的函数没有名称,也称为匿名函数
    也可以提供函数名,且可以用于函数内部指代其本身
    let fname = function fun(n) {return n+fun(n-1)}

    构造函数声明
    let fname = new Fun(){}

    箭头函数
    let fname = () => {}

    函数提升

    函数声明会被提升至当前所在函数范围内的顶部。

    注意:
    (1)、变量提升只是提升声明变量,却未被定义(访问后面定义的变量为undefined);
    (2)、函数的提升是整个已经被声明和被定义的函数(可以访问后面定义的函数)。

    arguments对象

    在函数内可以用arguments[i]找出传入的参数,i是参数的序数编号。
    使用arguments可以获取除了声明参数之外的参数,这在事先不知道会需要多少参数传递给函数时十分有用。

    arguments对象是类数组对象,有一个索引编号和length属性,并不拥有所有array对象的操作方法
    Array.isArray(arguments) //false
    Array.prototype.slice.call(arguments)可以把arguments转化为数组

    默认参数:undefined,可以手动设置
    箭头函数也可以指定默认参数

    函数作为参数

    值:具有某种类型的数据
    引用:可用来获取特定数据的值

    值类型:能直接方法的数据类型。
    引用类型:借助引用才能被访问的数组类型。

    高阶函数

    参数为函数,返回函数
    比如快排sort()

    形参赋值先于函数提升。

    js允许表达式作为参数

    函数作用域是可以访问上级作用域下的标志符。
    外部作用域无法访问函数内部的任意内容。避免了函数作用域中的标志符不与全局作用域的标志符产生冲突。

    我们在全局作用域下额外的添加了新的标志符。
    对“隐藏”起来的代码,我们还必须显示地通过函数名才能执行里面的代码。

    立即执行函数

    (function foo(){ … })():由于函数声明被包含在一对( ) 括号内部,因此成为了一个函数表达式,通过在末尾加上另外一个( )可以立即执行这个函数。

    第一个( )将函数声明变成函数表达式
    说明不会有函数提升。
    第二个( )执行了这个函数。
    还可以写成(function(){…}()),两者一致的。

    JavaScript的内存分配

    值的初始化:
    js在定义变量的时候就完成了内存分配

    通过函数调用分配内存:
    有些函数调用结果是分配对象内存的let n = new Date()
    有些方法分配新变量或者新对象a=[1],b=[2],c=a.concat(b)

    栈内存和堆内存

    堆内存:存储引用数据类型值
    栈内存:提供js代码执行的环境和存储基本类型值

    使用值
    使用值的过程实际上是对分配内存的进行读取与写入操作,读取与写入可能是写入一个变量或者一个对象的属性值,甚至传递函数的参数。

  • 相关阅读:
    产品经理进阶:产品的起点是发现并理解问题
    java-net-php-python-jsp校园招聘管理系统计算机毕业设计程序
    架设好传奇登录器显示无法连接服务器,完美登录器使用常见问题解决办法
    Unity SRP 管线【第二讲:Draw Call】
    如何解决缓存一致性问题
    uniapp项目搭建 请求配置
    hackthebox zipping
    MQ系列5:RocketMQ消息的发送模式
    【无标题】CondaHTTPError: HTTP 000 CONNECTION FAILED for url
    JavaWeb三大组件之Listener------Listener详细讲解
  • 原文地址:https://blog.csdn.net/u013035708/article/details/126352084