c 网站开发 pdf,济南集团网站建设报价,网络推广怎么做方案,wordpress主动推送函数就是将特定功能的代码封装起来#xff0c;当需要实现特定功能时#xff0c;直接调用函数实现即可。
一、函数定义和使用
1.1 定义函数
语句式命名函数
function sum(a,b) {return a b;
}变量函数表达式 是一个匿名函数#xff0c;它没有函数名
let sum function(…函数就是将特定功能的代码封装起来当需要实现特定功能时直接调用函数实现即可。
一、函数定义和使用
1.1 定义函数
语句式命名函数
function sum(a,b) {return a b;
}变量函数表达式 是一个匿名函数它没有函数名
let sum function(a,b) {return a b;
};1.2 调用函数
按顺序传入参数
console.log(sum(1,3))
function sum(a,b) {return a b;
}let sum2 function(a,b) {return a b;
};
console.log(sum2(1,3))函数声明提升: 语句式命名函数存在函数声明提升函数表达式声明函数函数时不可以把函数调用写在函数声明前面因为变量赋值不存在提升。
1.3 arguments
在函数内部起作用指向当前函数的调用者传入的所有参数它是一个类似数组的对象
let sum2 function(a,b) {console.log(arguments) //[1, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]console.log(arguments[2]) //4return a b;
};
sum2(1,3,4,5)arguments…length 获取调用函数实参个数callee 属性指向拥有这个arguments对象的函数
1.4 rest参数
剩余参数遵循传入顺序后的所有参数。rest参数只能写在最后前面用…标识
let sum function(a,b,...rest) {console.log(rest) //[4, 5]return a b;
};
sum2(1,3,4,5)二、变量作用域与解构赋值
2.1 变量提升
JavaScript的函数定义有个特点它会先扫描整个函数体的语句把所有申明的变量“提升”到函数顶部
2.2 全局作用域
函数之外声明的变量会成为全局变量就具有全局作用域
2.3 局部作用域
函数中声明的变量会成为函数的局部变量在函数外部不能访问
2.4 作用域链
当前作用域没有定义的变量会顺着作用域向父作用域找如果父级也没有找到再一层一层向上寻找直到找到全局作用域还是没找到就宣布放弃。这种一层一层的关系就是作用域链 。
2.5 名字空间
用于解决相同的全局变量、相同名字的函数造成命名冲突。
var NAME_SPACE {}
NAME_SPACE.name
NAME_SPACE.sum function() {}2.6 常量
let、var声明的是变量要声明一个常量使用ES6的const声明通常用全部大写的变量来表示“这是一个常量不要修改它的值”谷歌浏览器下赋值会报错。
const PI 3.14
PI 3 // index.html:53 Uncaught TypeError: Assignment to constant variable.
console.log(PI)2.7 解构赋值
可以同时对一组变量进行赋值
数组解构注意嵌套层次和位置要保持一致
let arr [诸葛亮, [刘备, 关羽], 张飞];
let [o, [p,q], r] arr;
console.log(o,p,q,r) //诸葛亮 刘备 关羽 张飞对象进行解构赋值 正常解构
let obj {name: 张飞,age: 37,country: 蜀国
}
let {name, age, country} obj
console.log(name,age,country) //张飞 37 蜀国嵌套的对象属性进行赋值: address不是变量而是为了让country、province、city获得嵌套的address对象的属性
let obj {name: 张飞,age: 37,address: {country: 蜀国,province: 四川,city: 成都}
}
let {name, age, address:{country,province,city}} obj
console.log(name,country,province,city) //张飞 蜀国 四川 成都
console.log(address) //Uncaught ReferenceError: address is not defined当解构赋值对应属性不存在时会赋值undefined
let obj {key: 004,name: 张飞,age: 37,address: {country: 蜀国,province: 四川,city: 成都}
}
// key不是变量而是为了让变量code获得key属性
let {name,id,key:code} obj
console.log(name) //张飞
console.log(id) // undefined
console.log(code) // 004解构赋值还可以使用默认值
let obj {key: 004,name: 张飞,age: 37,address: {country: 蜀国,province: 四川,city: 成都}
}
let {name,id001} obj
console.log(name) //张飞
console.log(id) // 001使用场景 1、直接获取某对象里面的属性值不需要通过.来获取和连续声明变量
let {x,y,z} {}2、函数接收一个对象作为参数可以直接用解构把对象属性赋值给变量
sum({x,y,z0}){return xyz
}3、变量值替换减少中间变量
let x1, y2;
[x,y] [y,x]
console.log(x,y) //2 1三、方法
一个对象中绑定函数这个函数称为这个对象的方法。
let obj {name: 张飞,birth: 1993,age: function() {let y new Date().getFullYear()return y - this.birth}
}
console.log(obj.age()) //303.1 this指向
this是执行环境上下文对象 它指向谁取决于它什么时候被调用、被谁调用。
在方法中this表示该方法所属的对象 也就是说谁执行这个方法this就指向谁
let person {name: 张飞,birth: 1993,say: function() {console.log(this)console.log(this.name)}
}
// person对象调用了方法this指向person
person.say()let person {name: 张飞,birth: 1993,say: function() {console.log(this)console.log(this.name)}
}
// 全局对象调用say方法因此this指向window
let say person.say
say()单独使用this 表示全局对象浏览器中指向向window函数中使用this表示全局对象浏览器中指向向window事件中的this指向了接收事件的 HTML 元素显示函数绑定 js中函数也是对象对象中则有方法apply 和 call 就是函数对象的方法他们允许切换函数执行的上下文环境context即 this 绑定的对象。
let personBase {name: 张飞,birth: 1993,say: function() {console.log(this)console.log(this.name)}
}
let person {name: 刘备,
}
let say personBase.say
say.call(person) //指向person
say.apply(personBase) //personBase1.2 调用函数扩展
函数名(实参列表)say(a,b)函数名.call(执行环境对象,实参列表)say.call(person,a,b,c…) call 方法用来改变 this 的指向第一个参数表示 this 的指向后面的参数表示传递的实参可以零个、一个或多个函数名.apply(执行环境对象,实参列表数组)say.apply(person,[a,b,c]) apply 方法和 call 方法基本相同也是用来改变 this 的指向不同点在于apply 传递实参时采用数组的形式。函数名.bind(执行环境对象)(实参列表)say.bind(person).(a,b,c) bind 也是用来改变 this 的指向的但是 bind(执行环境对象) 返回的是函数还没有被执行需要再使用执行函数。回调函数 主函数的事先做完回头再调用传进来的那个函数
四、立即执行函数
声明函数的同时立即调用这个函数立即执行函数是一个匿名函数
4.1 作用
1、页面加载完成后只执行一次的设置函数。 2、将设置函数中的变量包裹在局部作用域中不会泄露成全局变量
4.2 书写方式
// a b 形参
(function(a,b){//函数体内容console.log(a,b)
}(1,2));//形参 立即执行函数结束要加分号(function(a,b){console.log(a,b)
})(3,4)4.3 用例
由于log调用前循环执行结束所以输出5
for(let i0; i6; i) {function log() {console.log(i)}
}
log() //5使用立即执行函数
for(let i0; i6; i) {(function(j) {console.log(i) //0,1,2,3,4,5})(i)
}五、闭包
闭包是指有权访问另一个函数中的变量的函数。定义一个在函数内部的函数内部函数可以访问外包函数的局部变量
5.1 闭包形成条件
函数嵌套内部函数使用到了外部函数内容变量、函数等参数和变量不会被回收
function fun () {var x 0, y 1;function sum() {console.log(x y)return x y}return sum
}
let f fun()
f()5.2 闭包的作用
可以读取函数内部的变量让这些变量的值始终保持在内存中
function fun () {var n 0;function sum() {n 1console.log(n)}return sum
}
var f fun()
f() //1
f() //2fun执行两次 n分别输出1 和 2说明fun中的局部变量n一直存在内存中没有在fun调用后自动清除。 未清除的原因sum函数是fun的子函数fun执行后把sum函数赋值给了全局变量f全局变量f一直存在所以sum函数一直存在而sum又依赖于fun函数所以fun一直存在内存中未在调用结束后被垃圾回收机制回收。
5.3 闭包的注意事项
由于闭包会使得函数中的变量都被保存在内存中内存消耗很大所以不能滥用闭包否则会造成网页的性能问题闭包会在父函数外部改变父函数内部变量的值。所以如果你把父函数当作对象使用把闭包当作它的公用方法把内部变量当作它的私有属性这时一定要小心不要随便改变父函数内部变量的值。多个子函数都是同时指向父级是完全共享的。因此当父级的变量对象被修改时所有子函数都受到影响
六、箭头函数
箭头函数相当于匿名函数简化了函数定义
6.1 定义方式
// 省略简写方式
let fun1 (x,y) xy;// 多条语句
let fun2 (x,y) {console.log(x)return xy
}
fun1(1,2)
fun2(2,3)6.2 this问题
箭头函数内部的this是词法作用域由上下文确定。 箭头函数的外层如果有普通函数那么箭头函数的this就是这个外层的普通函数的this箭头函数的外层如果没有普通函数那么箭头函数的this就是全局变量。
箭头函数是匿名函数不能作为构造函数不可以使用new命令否则后抛出错误 箭头函数没有原型对象prototype这个属性箭头函数不绑定arguments取而代之用rest参数解决同时没有super和new.target箭头函数可以通过拓展运算符获取传入的参数。
let fun2 (...args) {console.log(args)return args[0]args[1]
}
fun2(2,3)使用call,apply,bind并不会改变箭头函数中的this指向 当对箭头函数使用call或apply方法时只会传入参数并调用函数并不会改变箭头函数中this的指向。 当对箭头函数使用bind方法时只会返回一个预设参数的新函数并不会改变这个新函数的this指向。
