Js-w3school（2024(15)，已拿意向书

最新推荐文章于 2024-10-01 18:51:18 发布

m0_60707708

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量616

点赞数 9

分类专栏：前端程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_60707708/article/details/136773487

版权

前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript中的箭头函数、this关键字的行为、const和var的区别，以及函数参数、调用规则、Call和Apply方法的应用。特别关注了闭包的概念，包括自调用函数和for循环中的闭包问题。

摘要由CSDN通过智能技术生成

箭头函数没有自己的 this。它们不适合定义对象方法。

箭头函数未被提升。它们必须在使用前进行定义。

使用 const 比使用 var 更安全，因为函数表达式始终是常量值。

如果函数是单个语句，则只能省略 return 关键字和大括号。

const x = (x, y) => {

var a=2;

return (xa)+(ya);

};

document.getElementById(“demo”).innerHTML = x(1, 5);//26

IE11 或更早的版本不支持箭头函数。

（二）函数参数

1.函数参数定义

functionName(parameter1, parameter2, parameter3) {

要执行的代码

}

函数参数（parameter）指的是在函数定义中列出的名称。

函数参数（argument）指的是传递到函数或由函数接收到的真实值。

2. 参数规则：无类型、无数量

JavaScript 函数定义不会为参数（parameter）规定数据类型。

JavaScript 函数不会对所传递的参数（argument）实行类型检查。

JavaScript 函数不会检查所接收参数（argument）的数量。

3. 如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。

4. 如果函数调用的参数太多（超过声明），则可以使用 arguments 对象（数组）来达到这些参数。

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {//求合函数

var i, sum = 0;

for (i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

5.参数传值，对象传址

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

在 JavaScript 中，对象引用是值。

正因如此，对象的行为就像它们通过引用来传递：

如果函数改变了对象属性，它也改变了原始值。

（三）函数调用

1.在函数被定义时，函数内部的代码不会执行。在函数被调用时，函数内部的代码会被执行。

2.函数形式调用

function myFunction(a, b) {

return a * b;

}

myFunction(10, 2); // 将返回 20

2.作为方法调用

var myObject = {

firstName:“Bill”,

lastName: “Gates”,

fullName: function () {

return this.firstName + " " + this.lastName;

}

myObject.fullName(); // 将返回 “Bill Gates”

3.函数构造器调用

如果函数调用的前面是 new 关键字，那么这是一个构造函数调用。

// 这是函数构造器：

function myFunction(arg1, arg2) {

this.firstName = arg1;

this.lastName = arg2;

}

// 创建了一个新对象：

var x = new myFunction(“Bill”, “Gates”);

x.firstName; // 会返回 “Bill”

（四）函数Call、Apply方法重用

1.call() 方法，您可以编写能够在不同对象上使用的方法。

call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。

var person = {

fullName: function(city, country) {

return this.firstName + " " + this.lastName + “,” + city + “,” + country;

}

var person1 = {

firstName:“Bill”,

lastName: “Gates”

}

person.fullName.call(person1, “Seattle”, “USA”);

//理解为person1.fullName(“Seattle”, “USA”)

2.通过 apply() 方法，您能够编写用于不同对象的方法。apply() 方法与 call() 方法非常相似，但是接受参数的方式不同

person.fullName.apply(person1, [“Oslo”, “Norway”]);

call()分别接收参数，apply()以数组形式接收参数

3.由于 JavaScript 数组没有 max() 方法，因此您可以应用 Math.max() 方法。

Math.max.apply(null, [1,2,3]); // 也会返回 3

Math.max.apply(Math, [1,2,3]); // 也会返回 3

Math.max.apply(" ", [1,2,3]); // 也会返回 3

Math.max.apply(0, [1,2,3]); // 也会返回 3

4．apply实现数组合并

Array.prototype.push.apply(arr1,arr2);

5.在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。非严格模式下，第一个参数值被指定为 null 或 undefined 时this值会自动替换为指向全局对象

（五）函数闭包

1.JavaScript 变量属于本地或全局作用域。全局变量能够通过闭包实现局部（私有）。

2. JavaScript 嵌套函数

所有函数都有权访问全局作用域。

事实上，在 JavaScript 中，所有函数都有权访问它们“上面”的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问其上的作用域。

function add() {

var counter = 0;

function plus() {counter += 1;}

plus();

return counter;

}

3.闭包

·闭包其实是在函数内部定义一个函数。

·闭包在使用的时候不会释放外部的引用，闭包函数内部的值会得到保留。

·闭包里面的匿名函数，读取变量的顺序，先读取本地变量，再读取父函数的局部变量。

·对于闭包外部无法引用它内部的变量，因此在函数内部创建的变量执行完后会立刻释放资源，不污染全局对象。

·闭包使用的时候要考虑到内存泄漏，因为不释放外部引用，但是合理的使用闭包是内存使用不是内存泄漏。

（1）自调用函数

var add = (function () {

var counter = 0;

return function () {return counter += 1;}

})();

add();

// 计数器目前是 3

该函数在自定义时候首先执行一次并初始化counter为0。这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

add 成为了函数，它能够访问父作用域中的计数器。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

（2）for循环案例

var arrays = [];

for (var i=0; i<3; i++) {

arrays.push(function() {

console.log('>>> ’ + i); //all are 3

});

}

上面的这段代码，刚看了代码一定会以为陆续打印出1，2，3，实际输出的是3，3，3，出现这种情况的原因是匿名函数保存的是引用

当for循环结束的时候，i已经变成3了，所以打印的时候变成3。出现这种情况的解决办法是利用闭包解决问题。

for (var i=0; i<3; i++) {

(function(n) {

tasks.push(function() {

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。