1. 函数的定义和调用
1.1 函数的定义方式
- 函数声明方式function关键字(命名函数)
- 函数表达式(匿名函数)
- new Function()
var fn = new Function('参数1', '参数2',...,'函数体')
- Function里面参数都必须是字符串格式
- 第三种方式执行效率低,也不方便书写,用的比较少
- 所有函数都是Function的实例(对象)
//函数声明方式
function fn() {}
//函数表达式(匿名函数)
var fn = function() {}
//利用new Function('arg1','arg2', 'fn')
var f = new Function('a','b',console.log(a+b)')
f(1,2) // 3
所有的函数都是Function实例对象
1.2 函数的调用方式
- 普通函数
- 对象的方法
- 构造函数
- 绑定事件函数
- 定时器函数
- 立即执行函数
// 普通函数
function fn() {
console.log('前端岚枫博客')
}
fn() //前端岚枫博客
//对象的方法
var obj = {
say: function () {
console.log('前端岚枫博客')
}
}
obj.say() //前端岚枫博客
//构造函数
function Star() {
}
new Star()
//绑定的事件函数
btn.onclick = function() {} //点击了按钮就可以调用该函数
//定时器函数
setInterval(function() {}, 1000)
//立即执行函数
(function() {
console.log('前端岚枫博客') //自动调用
})()
2. this
2.1 函数内this的指向
这些this的指向,是当调用函数的时候确定的调用方法的不同决定了this的指向不同,一般指向调用者。
调用方式
调用方式 | this指向 |
---|---|
普通函数调用 | window |
构造函数调用 | 实例对象 原型对象里面的方法也指向实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
2.2 改变函数内部this指向
Javascript为提供了一些函数方法来帮助我们更优雅地处理函数内部this的指向问题,常用的有bind()、call()、apply()三种方法。接下来,我们来详细的介绍一下这三种方法的用法,看看它们是如何改变this指向的。
- call方法
call()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向。
fn.call(thisArg, arg1, arg2, ...)
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
fn.call(obj, 1, 2) //指向obj, 3
//实现继承
function Father(uname, age, sex) {
this.uname = uname
this.age = age
this.sex = sex
}
function Son () {
Father.call(this,uname, age, sex)
}
var son = new Son('柳岩',18,'女')
call:第一个可以调用函数,第二个可以改变函数内的this指向
call的主要作用可以实现继承
- apply方法
apply()方法调用一个函数。简单理解为调用函数的方式,它与call方法一样可以改变函数的this的指向,但是它跟call传参数方式不一样,它是传的参数必须在一个数组里
fun.apply(thisArg, [argsArray])
- thisArg:在fun函数运行时指定this的值
- argsArray: 传递的值,必须包含在数组里面
- 返回值就是函数的返回值,因为它就是调用函数
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
fn.apply(obj, [1, 2]) //指向obj, 3
apply:第一个可以调用函数,第二个可以改变函数内的this指向
apply的参数必须时数组(伪数组)
apply的主要应用,求数数组中的最大值,最小值
var arr = [1, 66, 3, 99, 4]
var max = Math.max.apply(Math, arr)
var min = Math.min.apply(Math, arr)
console.log(max, min) //99 1
- bind方法
bind()方法不会调用函数,但是能改变函数内部this指向
fn.bind(thisArg, arg1, arg2, ...)
- thisArg: 在fn函数运行时指定的this值
- arg1, arg2: 传递的其他参数
- 返回由指定的this值和初始化参数改造的原函数拷贝
var obj = {
name: 'lanfeng'
}
function fn(a, b) {
console.log(this)
console.log(a+b)
}
fn(1,2)//指向window, 3
var f = fn.bind(obj, 1, 2)
f()
bind: 不会调原来的函数,可以改变this指向,返回的函数是改变this之后产生的新函数
bind的应用: 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
var btn = document.querySelector('button')
//以前的用法
btn.onclick = function() {
var that = this
this.disabled = true
setTimeout(function(){
that.disabled = false
}, 3000)
}
// bind用法
btn.onclick = function() {
this.disabled = true
setTimeout(function(){
this.disabled = false
}.bind(this), 3000)
}
2.3 call apply bind 总结
相同点:
都可以改变函数内部的this指向
区别点:
- call 和apply 会调用函数,并且改变函数内部的this指向
- call和apply传递的参数不一样,call传递参数形式arg1, arg2, ...形式,apply必须数组形式
- bind不会调用函数,可以改变函数内部的this指向
主要应用场景:
- call经常做继承
- apply经常跟数组有关系,比如借助于数学对象实现数组的最大值最小值
- bind不调用函数,但是还想改变this指向,比如改变定时器的内部this指向
总结
本篇文章主要分享了javascript的函数定义、用法、this及改变this指向的几种方法、如想了解更多,请扫描二维码:
原文地址:https://www.cnblogs.com/lfcss/p/12395401.html
时间: 2024-11-07 13:01:11