带你学习Javascript中的函数进阶(一)

1. 函数的定义和调用

1.1 函数的定义方式

  1. 函数声明方式function关键字(命名函数)
  2. 函数表达式(匿名函数)
  3. 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 函数的调用方式

  1. 普通函数
  2. 对象的方法
  3. 构造函数
  4. 绑定事件函数
  5. 定时器函数
  6. 立即执行函数
// 普通函数
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指向的。

  1. 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的主要作用可以实现继承

  1. 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
  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指向
区别点:

  1. call 和apply 会调用函数,并且改变函数内部的this指向
  2. call和apply传递的参数不一样,call传递参数形式arg1, arg2, ...形式,apply必须数组形式
  3. bind不会调用函数,可以改变函数内部的this指向

主要应用场景:

  1. call经常做继承
  2. apply经常跟数组有关系,比如借助于数学对象实现数组的最大值最小值
  3. bind不调用函数,但是还想改变this指向,比如改变定时器的内部this指向

    总结

    本篇文章主要分享了javascript的函数定义、用法、this及改变this指向的几种方法、如想了解更多,请扫描二维码:

原文地址:https://www.cnblogs.com/lfcss/p/12395401.html

时间: 2024-11-07 13:01:11

带你学习Javascript中的函数进阶(一)的相关文章

一篇文章带你了解JavaScript中的函数表达式,递归,闭包,变量,this对象,模块作用域

作者 | Jeskson 来源 | 达达前端小酒馆 定义函数的方式: 第一种为 函数声明: 第二种为 函数表达式. 语法: function functionName(arg0, arg1, arg2) { // 函数体 } 在Firefox,Safari,Chrome和Opera有效: 就是通过这个属性可以访问到这个函数指定的名字. console.log(functionName.name); // 'functionName' 函数声明: 它的一个重要特点就是:函数声明提升,就是在执行代码

前端学习 第六弹: javascript中的函数与闭包

前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {    var tmp = 3;    function bar(y) {        alert(x + y + (++tmp));    }    bar(10);}foo(2) 这时无论怎么运行输出的都是16,但这不是闭包 如果我们返回内部函数,内部function会close-over外部fu

如何理解并学习javascript中的面向对象(OOP) [转]

如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的作者一样,写出属于自己优秀的类库(哪怕是基于 jquery的插件).那么,你请务必要学习javascript面向对象,否则你无法更灵活的使用javascript这门语言. 什么事闭包?到底什么是原型?(知道闭包和原型的,就算得上是javascript的高手了.但真正能够理解,并且灵活运用的人并不多)到底该如何学习javascript中的面向对象呢?在javascript这么语言正如日中天,相信不少人正在为

再次学习javascript中的参数传递

javascript中的所有函数的参数传递都是按照值传递的,做了下面测试: function addTen(num){ num +=10; return num; } var count = 20; var result = addTen(count); alert(cont); //20 alert(result); //30 好吧,上面只是做了基本类型的传递,再做个引用类型的传递看看: function setName(obj){ obj.name="Mark"; } var pe

[JavaScript]JavaScript中的函数(1)

关于JavaScript中函数的学习: MDN 阮一峰老师的教程 关于函数的定义: 阮一峰老师:函数是一段可以反复调用的代码块.函数还能接受输入的参数,不同的参数会返回不同的值. MDN:Function 构造函数 创建一个新的Function对象. 在 JavaScript 中, 每个函数实际上都是一个Function对象. 函数的声明方式和name 函数的声明方式有目前来说有5种,每一个函数都有他的一个name属性(包括匿名函数),要注意. 具名函数 function fn(x,y) { c

一篇文章带你了解JavaScript中的变量,作用域和内存问题

作者 | Jeskson 来源 | 达达前端小酒馆 1 在JavaScript中的变量分别区分为两种: 一种为基本类型值,一种为引用类型值. 基本类型值指的是简单的数据段 引用类型值为可能由多个值组成的对象 引用类型的值是保存在内存中的对象,JavaScript不允许直接操作对象的内存空间,实际上操作对象的引用而不是实际对象. var dada = new Object(); undefined dada.name = "dada"; "dada" console.

javascript中所有函数的参数都是按值传递的

[javascript中所有函数的参数都是按值传递的] 参考:http://www.jb51.net/article/89297.htm

JavaScript中的函数表达式

在JavaScript中,函数是个非常重要的对象,函数通常有三种表现形式:函数声明,函数表达式和函数构造器创建的函数. 本文中主要看看函数表达式及其相关的知识点. 函数表达式 首先,看看函数表达式的表现形式,函数表达式(Function Expression, FE)有下面四个特点: 在代码中须出现在表达式的位置 有可选的函数名称 不会影响变量对象(VO) 在代码执行阶段创建 下面就通过一些例子来看看函数表达式的这四个特点. FE特点分析 例子一:在下面代码中,"add"是一个函数对象

JavaScript中valueOf函数与toString方法的使用

所有JS数据类型都拥有valueOf和toString这两个方法,null除外. JavaScript中valueOf函数方法是返回指定对象的原始值. 使用方法: object.valueOf( ). object是必选参数,是任意固有 JavaScrip对象. JavaScript 的 valueOf() 方法 valueOf() 方法可返回 Boolean 对象的原始值. 用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值.如果调用该方法的对