JavaScript 高级 函数进阶
2020年7月14日函数的声明方式
- function 关键字
- 匿名函数
- new Function() 构造函数
- 所有函数都是 Function 的实例对象
- 函数也是对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//函数声明方式 function 关键字 (命名函数) function fn(){ console.log(1) } fn() //函数表达式 (匿名函数) var fn1 = function(){ console.log(2) } fn1() //new Function() var fn2 =new Function('a','b','console.log(a+b)') fn2(1,2) |
函数的调用方法 和 this 的指向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//普通函数 function fn() { console.log(1) } fn() //对象方法 var obj = { fn:function () { console.log(2) } } obj.fn() //构造函数 function Star(){ console.log(3) } var star = new Star(); //绑定事件函数 document.querySelector('div').onclick = function(){ console.log(4) } //定时器函数 setInterval(function () { console.log(5) }, 1000) //立即执行函数 ;(function () { console.log(6) })(); |
这些this的指向,是当我们调用函数的时候确定的,调用的方式不同决定了this的指向不同,一般指向我们调用者
- 普通函数 window
- 构造函数 实例对象,原型对象也执行实例对象,(实例对象就是那个变量)
- 对象方法 指向该方法所属对象
- 事件绑定方法 绑定事件的对象
- 定时器 window
- 立即执行函数 window
改变函数内部this指向
call()方法 常用于继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** * 父构造函数 * @param userName * @param age * @constructor */ function Father(userName, age) { this.userName = userName this.age = age } /** * 子构造函数 * @param userName * @param age * @constructor */ function Son(userName, age) { /** * 在子(Son)构造函数中,通过call的方式调用父(Father)构造函数,如果是用new 构造方法()的方式调用this指向的是window */ Father.call(this, userName, age) //使用call()的方式调用,改变指向, this 后的参数可以无限添加都是形参 } /** * 通过构造函数实例化的方式,获取构造原型的方法, * 这样下次再给Son.prototype追加方法,也不会 * 影响到Father的构造原型,不可以构造原型等于构造原型 * X Son.prototype = Father.prototype * @type {Father} */ Son.prototype = new Father(); //给son原型赋值 Son.prototype.constructor = Son; //如果是用对象的方式修改了原型,别忘了利用constructor 指回来原来的构造函数 var son = new Son('刘德华', 18) |
apply()方法 常和数学函数Math配合使用
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var o = { name: 'ldh' } function fn() { console.log(this) console.log(arguments) } var arr = [2, 3, 4, 5, 6] fn.apply(o, arr) //调用方法并改变this指向 传递的参数必须是数组形式的 Math.max.apply(Math, arr) //最主要的使用方式 Math.min.apply(Math, arr) //最主要的使用方式 |
bind()方法 常和时间自调函数配合使用
1 2 3 4 5 6 7 8 9 10 11 |
var button = document.querySelector('button') /** * bind常用与,时间函数身上 */ button.onclick = function () { this.disabled = true setTimeout(function () { this.disabled = false }.bind(this), 3000) } |