JavaScript函数来喽！

最新推荐文章于 2024-09-24 10:50:41 发布
最新推荐文章于 2024-09-24 10:50:41 发布
阅读量120 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddd2501/article/details/128213060
版权

1.普通函数

  • 普通函数

  • 不管是不是全局作用域，this都指向执行环境或者调用对象（重点理解）

// 1.如果在html文件中执行，那么执行环境为window
<html lang="en">
// 在html文件中引入script文件
  <script src="./test.js"></script>
// 在html文件中直接使用script标签执行JS代码
  <script>
      function myfn(){
        console.log(this); // this指向window对象
      }
      myfn();
      console.log(this); // this指向window对象
  </script>
</html>
// test.js文件下的代码
function myfn(){
    console.log(this); // window对象
}
// 调用方式
myfn();
// 或者 利用双阔号的方式，让其自动调用（网页被打开或者测试的时候，它就自行调用）
(function myfn(){
    console.log(this);
})()

// 2.在JS文件下测试（node环境），执行环境是准确来讲应该是 module.exports，也就是{} 空对象，也就会出现undefined(重点理解)
function myfn(){
    console.log(this); // undefined
}
myfn();
console.log(this); // undefined

  • 注意：

    • 在严格模式下（函数内部的this不能指向全局对象，默认等于undefined）

    • 全局作用域下，this指向执行环境

    • 非全局作用域下，this指向undefined

// 1.在html文件下执行
<body>
  <script>
    "use strict"; // 严格模式下
    function myfn() {
      console.log(this); // 非全局作用域里面的this指向 undefined
    }
    myfn()
    console.log(this); // 全局作用域里面this指向执行环境 window
  </script>
</body>
// 2.在JS文件下测试,没有对应的执行环境，则不管是不是全局作用域，this都指向 node环境的module.exports空对象{}
"use strict"; // 严格模式下
function myfn() {
  console.log(this); // undefined
}
myfn() // 调用函数
console.log(this); // undefined

  • 匿名函数

    • 说白了就是用一个变量来接收函数的返回值，输出这个变量，也就是输出这个变量的返回值

  • 注意：

    • 竟然是用变量来接收一个函数的返回值，则这个函数的性质就跟着定义变量的关键字来了，也就是说变量提不提升（意味着函数提不提升），提升之后是否进行初始化啊等等这些问题

let、const、var都能造成变量提升（函数提升），但是let、const不初始化函数，而var初始化函数，输出 undefined

  • this指向执行环境或者调用对象（重点理解）

// 语法格式：
let myfn = function(){ // 接收变量为 myfn
    console.log(this); // this指向执行环境
}
myfn() // 这里是执行环境调用的 myfn()
let obj = {
    sing:function(){ // 接收的变量为 sing
        console.log(this); // this指向 obj对象
    }
}
obj.sing() // 这里是 obj 对象调用的 sing

// var 变量提升
console.log(myfn) // 这里面myfn后面不能接括号，因为myfn这个时候被初始化成 undefined了，如果加括号会报错 myfn不是一个函数
var myfn = function(){ // var有变量提升，且初始化变量，myfn
  console.log(this)
};
// let、const 变量提升，但是不会初始化变量，则会直接报错 myfn没有被初始化
console.log(myfn) 
const myfn = function(){
    console.log(this)
}
console.log(myfn)
let myfn = function(){
    console.log(this)
}

  • 构造函数（重点理解）

    • 定义

      • 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用

    • 创建（区别普通函数）

      • 首字母一般大写

      • 函数体内部使用了this关键字，代表了所要生成的对象实例(最后返回的也就是这个this实例对象)

      • 生成对象的时候，必须使用new命令

    • 运用

      • 使用new关键字运用，另外可以用一个变量接收

    • 注意：（特别注意）

      • 构造函数必须使用new关键词调用，不然会出现变量外出的误会

      • 当利用new关键字时，构造函数内如果出现return语句返回一个数值，new命令则会忽略这个数值，返回“构造”后的this对象

      • 当利用new关键字时，构造函数内如果出现return语句返回一个与this无关的对象，new命令则会返回这个新对象，而不是“构造”的this对象

为了保证构造函数必须与new命令一起使用，一个解决办法是，构造函数内部使用严格模式，即构造函数内部第一行加上“use strict”（严格模式）。这样的话，一旦忘了使用new命令，直接调用构造函数就会报错。

// 创建构造函数方法（1）
function Start(name,age){
    // 构造函数里面的属性
    this.name = name;
    this.age = age;
    // 构造函数下的方法 
    this.sing = function(){
        console.log('我会唱歌')    
    }
}
// 创建构造函数方法（2）
let Start = function(name,age){
    // 构造函数里面的属性
    this.name = name;
    this.age = age;
    // 构造函数下的方法 
    this.sing = function(){
        console.log('我会唱歌')    
    }
}
// 运用构造函数
let start = new Start('ldh',23);
// 调用构造函数里面的方法
start.sing() 

// 未用 new 关键字调用 构造函数(造成误会)
function Myfn(){
    this.height = 190;
    return 180;
}
let myfn = Myfn();
console.log(myfn); // 180
console.log(window.height); // 190
// 利用 new 关键字调用 构造函数 （含有return返回数值）
function Myfn(){
    this.height = 190;
    return 190; // 有return 语句，并且返回的是一个数值，则会被new忽略
}
let myfn = new Myfn();
console.log(myfn); // 得到Myfn {height: 190}，而不是return返回来的值，说明new使 自定义的return返回的数值被忽略了
console.log(window.height); // undefined
// 利用 new 关键字调用 构造函数 （含有return返回新的对象）
function Myfn(){
    this.height = 190;
    return {height : 180，price : 20}; // 有return 语句，并且返回的是一个新的对象，则新对象会把“构造”的this对象覆盖
}
let myfn = new Myfn();
console.log(myfn); // 得到Myfn {height : 180,price : 20}，而不是return返回来的值，说明new使 自定义的return返回的数值被忽略了
console.log(window.height); // undefined

1.new关键字干了些什么？(重点理解)

  1. 创建一个空对象，作为将要返回的对象实例。

  2. 将这个空对象的原型（__proto__）指向构造函数的prototype属性。

  3. 将这个空对象赋值给函数内部的this关键字。

  4. 开始执行构造函数内部的代码。

也就是说，构造函数内部，this指的是一个新生成的空对象， 所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”， 就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子！

2.new.target是干嘛的？(重点理解)

用来指向new关键字处理的函数，如果不为new关键字处理，则new.target为undefined

用途：可以用来判定函数是否由new关键字处理

function Myfn(name, age) {
  this.name = name;
  this.age = age;
  if(new.target === undefined){
    throw Error('请使用new');
  }else{
    console.log('你成功使用了new');
  }
}
let myfn = new Myfn('ldh', 23); // '你成功使用了new'
let myfn = Myfn('ldh',23); // '请使用new'

重点理解：

1.对象是什么？（记忆理解）

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟

（1）对象是单个实物的抽象。

一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。

（2）对象是一个容器，封装了属性（property）和方法（method）。

属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是那一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息）等等。

2.构造函数和普通函数的对比

区别：构造函数是一个封装对象，可以有属性和方法并且可以使用new关键字得到一个实例对象，之后通过这个实例对象来运用它们，而普通函数只能处理简单逻辑，得到某个值

// 构造函数
function Myfn(name){
    // 属性
    this.name = name;
    // 方法
    this.sing = function(){
        console.log('我会唱歌')    
    }
}
let myfn = new Myfn(); // 得到一个 Myfn{name,sing(){console.log('我会唱歌')}} 对象，
                       // 我们可以根据new出来的实例运用对象里的方法和属性
console.log(myfn.sing); // '我会唱歌' 
// 普通函数
function myfn(){
    let name = 'ldh';
    let sing = function(){
        console.log('我会唱歌');    
    }
    return myfn; // 得到的是一个 myfn对象值，而并不是对象
}
let fn = myfn(); // 这里就是 fn 变量接受了 myfn() 函数的return的值，也就是 myfn对象值
/*
// myfn对象值
ƒ func(){
  let a = 10;
  let sing = function(){
    console.log(this);
  }
  return func;
}
*/
console.log(fn.sing); // undefined

3.Arguments对象

arguments是一个对应于传递给函数的参数的类数组对象。除了箭头函数以外的所有函数都有这个局部变量，它存储着我们手动传入的参数。

// 普通函数
function myfn(n1,n2){
  console.log(arguments); // 得到一个类数组 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 存下了我们传进的参数 1，2
  console.log(arguments[0]); // 1
  console.log(arguments[1]); // 2
}
myfn(1,2);
// 构造函数
function Myfn(name,age){
    this.name = name;
    this.age = age;
    console.log(arguments); // 得到一个类数组 Arguments(2) ['ldh', 23, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(arguments[0]); // 'ldh'
    console.log(arguments[1]); // 23
}
let myfn = new Myfn('ldh',23);

2.箭头函数

  • 与普通函数的区别

在ES6中，箭头函数是其中最有趣的新增特性之一，箭头函数是一种使用箭头 => 定义函数的新语法，但它和传统的JavaScript函数有些许不同：

1.没有this、super、arguments和new.target绑定：(以下三种情况)

  • 1.1对象字面量里面含有箭头函数

    • 箭头函数中的this、super、arguments和new.target这些值由外围最近一层非箭头函数（离得最近的function字样）所决定。其实再说简单点就是箭头函数的this在定义它的时候就诞生了，且this的指向是外围的第一个含有function字样的对象的作用域对应的变量值

  • 1.2构造函数里面包含箭头函数

    • 箭头函数中的this、super、arguments和new.target这些值由构造函数决定，也就是this指向构造函数

  • 1.3普通函数里面包含箭头函数

    • 箭头函数中的this、super、arguments和new.target这些值由执行环境决定，也就是this指向执行环境变量

2.不能通过new关键词调用：因为箭头函数没有[[Construct]]函数，所以不能通过new关键词进行调用，如果使用new进行调用会抛出错误。

3.没有原型：因为不会通过new关键词进行调用，所以没有构建原型的需要，也就没有了prototype这个属性。

4.不可以改变this的绑定：在箭头函数的内部，this的值不可改变(即不能通过call、apply或者bind等方法来改变)。

5.不支持arguments对象：箭头函数没有arguments绑定，所以必须使用命名参数或者不定参数这两种形式访问参数。

6.不支持重复的命名参数：无论是否处于严格模式，箭头函数都不支持重复的命名参数。

  • 箭头函数的this问题（重点理解）

    • 对象字面量中包含箭头函数的情况（重点理解）

// 1.普通函数的this指向和改变this指向
var name = 'window'; // 其实是window.name = 'window'
var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)    
   }
}

A.sayHello();// 输出A （普通函数的this指向，谁调用它，它就指向谁）

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B （普通函数的this指向可以被改变）
A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

// 2.箭头函数的this指向以及this指向能否改变
var name = 'window'; 
var A = {
   name: 'A',
   // 定义sayHello为箭头函数，它的this会往外围寻找，也就是先找到 var A = {} 块级作用域，但并不含有function字样，则继续往外围找，找到最后都没找到
   // this就会指向执行环境对应的对象（浏览器对应window,node对应module.exports空对象{}[undefined]）
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

// 3.再举个例子(在浏览器环境下执行)
let obj = {
  sing: () => {
    console.log(this); // 往上找function字样，找不到，就指向执行环境对应的对象,所以指向window
    let ring = () => {
      console.log(this); // 往上找function字样，找不到，就指向执行环境对应的对象，所以指向window
    }
    return ring();
  }
}
let obj1 = {};
obj.sing();
obj.sing.apply(obj1); // 上面的指向依旧不改变，还是指向window
// 4.继续举个例子(在浏览器环境下执行)
let obj = {
  sing:function(){
    console.log(this); // 普通函数，谁调用，this就指向谁，则指向obj
    let ring = () => {
      console.log(this); // 往上找function字样，找到sing是带有function字样的，sing所在obj的块级作用域中，则就指向obj这个变量
    }
    return ring();
  }
}
let obj1 = {};
obj.sing();
obj.sing.apply(obj1); // 可以改变普通函数this指向，则箭头函数跟随function字样的作用域的this
  •  普通函数和构造函数里面包含箭头函数（重点理解）

1.构造函数里面含有箭头函数

this会指向构造函数

2.普通函数里面含有箭头函数(用不用闭包都是一样的)

this会指向执行环境变量

// 构造函数里面含有箭头函数
function Myfn(name,age){
  this.name = name
  this.age = age
  this.song = () => {
    console.log(this) // 指向构造函数 Myfn {name: 'ldh', age: 23, song: ƒ}
  }
}
let myfn = new Myfn('ldh',23);
myfn.song(); 
// 普通函数里面含有箭头函数（未使用闭包，利用立即调用函数处理）(执行环境为window)
function my(){
  let fn = (function(){
    let func = (() => {
      console.log(this); // 指向window，这里会发现 this 并没有指向 fn ，而是指向window
    })();
  })();
}
my()
// 普通函数里面含有箭头函数（使用闭包，利用立即调用函数处理）(执行环境为window)
function my(){
  let fun = function(){
    let func = () => {
      console.log(this) // 指向window，这里会发现 this 并没有指向 fun ，而是指向window
    }
    return func();
  }
  return fun()
}
my()

  • 箭头函数的表现形式（四种）

// 表现形式之一：没有参数
let reflect = () => 5
// 相当于
let reflect = function () {
  return 5
}

// 表现形式之二：返回单一值
let reflect = value => value // 单个参数时，可以不用小括号
// 相当于
let reflect = function (value) {
  return value
}

// 表现形式之三：多个参数
let reflect = (val1, val2) => val1 + val2 // 没有大括号包裹时，假定是有return的
// 或者
let reflect = (val, val2) => {
  return val1 + val2
}
// 相当于
let reflect = function (val1, val2) {
  return val1 + val2
}

// 表现形式之四：返回一个对象，对象必须被小括号包裹着才能返回，或者直接使用return
let reflect = (id) => ({ id: id, name: 'why' })
// 相当于
let reflect = function (id) {
  return {
    id: id,
    name: 'why'
  }
}

执迷原理
关注
今日笔记来喽！！！
qq_48846376的博客
06-29 1138
今日笔记重点 比较： ！= ：不等于 === ：真等于（全等于） 逻辑运算： && ： 与 【同真为真var a=1&&2,先看第一个表达式转换成布尔值得结果，如果结果为真，那么它会看第二个表达式转换为布尔值得结果，然后如果只有两个表达式得化，只看看到第二个表达式，就可以返回该表达式得值了,全真为真，一个假得就是假】 || ： 或 ！ ：非【取反】 条件语句，循环语句，while循环，do while: //99乘法表 for(var i = 1; i&l
强化JS基础水平的10个单行代码来喽！（必看）
蜗牛~~
08-05 839
规范中提到， 要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，并且规定null 和 undefined 是相等的。是 ECMAScript 6 中新增的一个方法，它可以从类数组对象或可迭代对象（如字符串、Set、Map、NodeList 等）创建一个新的数组实例。提供初始值，cur 从数组第一项开始，若不提供初始值，则 cur 从第二项开始执行，对应的第一次 prev 是数组第一项的值。能做的，reduce都可以做，比如数组求和、数组求积、统计数组中元素出现的次数、
在线js编辑器来喽！CodeMirror页面代码编辑器
Pinkr28的博客
07-01 1992
在公司的开发平台使用时需要用到js代码编写输入框，大家都是在vscode之类的编辑器写好后粘贴，在用重构项目的时候想到了这里的弊端，想在页面上也可以有js 的结构可编写代码，就清晰方便很多。 来了来了它来了 大声喊出它的名字：CodeMirror 这个是我做调研使用vue还是react重构的时候发现的一款代码编辑器！！ 最终 找到了他有基于react开发的组件啊啊啊啊 话不多说 上官网：　https://www.npmjs.com/package/react-codemirror2 ...
javascript(函数)
weixin_30378623的博客
04-02 77
function 函数是一段可以重复调用的代码块。接收相应的参数并可以返回对应的值 函数的声明 　　javascript有三种声明函数的方法。function命令、函数表达式、Function构造器。 　　　　（1）function命令 　　　　　function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数...
JavaScript之深入对象，详细讲讲构造函数与常见内置构造函数
共同学习，共同成长
07-03 1750
今天给大家详细讲讲构造函数与常见内置构造函数，理解 JavaScript 中一切皆对象的语言特征，能够基于构造函数创建对象，掌握包装类型对象常见方法的使用，并提供具体代码帮助大家深入理解，彻底掌握！
JavaScript函数声明提升
weixin_30832983的博客
12-14 61
　　首先，JavaScript中函数有两种创建方式，即函数声明、函数表达式两种。 　　1、函数声明。　 function boo(){ console.log(123); } boo() 　　2、函数表达式。 var boo = function(){ console.log(123) } boo() 　　现在来说说函数声明提升。还...
JavaScript基础
捣蛋龙的博客
07-10 1398
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言
构造函数的含义和使用
阿天
08-31 2161
构造函数大全
JavaScript 中的面向对象编程---＞构造函数---＞原型对象与原型链，由浅入深详细讲解！
共同学习，共同成长
07-08 1848
今天给大家分享JavaScript 中的面向对象编程--->构造函数--->原型对象与原型链，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
Javascript 生成指定范围数值随机数
12-09
不过经过俺的小小努力之后, 终于让俺摸着门道喽, 问题也就理所当然滴解决掉. 然后就写了个公式, 这样应该可以消失掉这个用法了, 公式: 1. 从1开始 至 任意值 linenum parseInt(Math.random()*上限+1); 2. 从任意值...
JavaScript--自定义bind函数
ahiai的博客
03-28 348
bind函数介绍 bind函数实际上是柯理化思想。大函数执行返回一个小函数，执行大函数，把需要准备的内容准备好、当前大函数的执行上下文因为小函数的引用关系就不能销毁了，形成了闭包。这样事先准备好的内容就能保存下来，当执行小函数时就会用到大函数里保存的信息。 这相当于大函数预先把信息存储起来，以后用的时候直接在小函数中调用即可。 实现bind函数 最外围是一个立即执行函数，在立即执行函数中完成使用...
js异步，回调函数，看了就懂
weixin_43946748的博客
11-24 1581
异步执行，回调函数，promise对于前端开发者来说是必须掌握且至关重要的问题，为了学好promise所以先深入理解一下异步，以及回调函数的概念。 1.何谓同步异步？ 同步：按顺序执行，后者一定要等前者完成之后才可以开始，如下代码 function f1(){ console.log('1'); } function f2(){ console.log('2'); } function f3(){ console.log('3'); } f1() f2() f3() 结
vuex仓库的五大属性、辅助函数与使用方法，史上最详细！
共同学习，共同成长
06-05 2003
Vuex是Vue.js的状态管理库，它通过中心化的状态管理使得组件间的数据共享更加容易。Vuex包含五个核心属性:state、getters、mutations、actions和modules。今天我们将详细讲解这五大属性的使用方法与辅助函数，并结合具体代码让小伙伴们深入理解 ，彻底掌握！
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4101
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 284
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 700
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
最新发布
央顺科技官方博客
09-24 555
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 317
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执迷原理

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值