javaScript函数基础总结(1)声明/调用/this

函数是什么?

函数是一种特殊的对象,也是由事件驱动或者被调用时执行的可重复使用的代码块。

函数的几种声明方式

function fn1(input1,input2){
console.log(fn1.name)
}//具名函数声明

function(){
 console.log('我没有name属性')
}//匿名函数声明,一般不单独使用

var x = function fn3(input1,input2){
 console.log(fn3.name)
}// 变量赋值方式
console.log(x.name) //'fn3'
console.log(fn3.name)//报错,fn3没有定义。

var y = new Function ('x','y','return x+' + n + '+y')
//函数对象构造声明
//除最后一个参数是函数体外,其他都是参数

f(x,y) =>{console.log('我是匿名函数,没有name属性')}
//ES6新语法
  • 创建匿名函数可以避免命名冲突。
  • 匿名函数创建完成后,在堆内存(heap)内存上地址,被变量引用才能被使用。
  • 或者匿名函数在创建完成后直接调用。(这个用法在MVC中js模块中常被使用。)

函数的调用

function callfn(){
  console.log('我被调用了')
}
//第一种调用方式,语法糖
callfn()
//第二种调用方式,call()
callfn.call(undefined,argument1,argument2)
//第三种调用方式,apply()
callfn.apply(undefined,[argument1,argument2])

Ⅰ. this

前面call()apply()的调用方法,第一个参数就是this。
在我接触this的一段时间里,this是一个捉摸不透的玩意。很多时候一不小心加了几个代码,就改变了this的指向,而我却毫不知情。所以对this做一个总结是很有必要的。
为了了解this,我翻看了好多篇技术博客,有一篇博客我觉得形容this很贴切。

this是某个函数运行时的上下文(context),call()、apply()的存在就是为了改变函数体内部 this 的指向。
而JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

1.this首先肯定是一个对象。
2.this是函数与对象的羁绊。
3.this就是这个嵌有这个函数的对象。
几个典型的小李子:

  • 第一个小李子
function obj(){
    var a = 1
    console.log(this.a)
}
var a = 2
obj() //2
//在这个例子里,obj是一个全局变量函数。
//它被包含在window对象,所以我们可以理解为它的this就是window。
//但要注意的是!!如果在严格模式下,this会指向undefined!
  • 第二个小李子
var obj = {
    a: 2,
    fn1: function (){
    var a = 1
    console.log(this.a)
    }
}
obj.fn1() //2
//在这个例子里,可以看出fn1是obj的其中一个方法函数,
//这里的this就是包含fn1这个函数的上一级对象----obj。
  • 第三个小李子
function fn1(){
    var a = 1
    console.log(this.a)
}
var obj = {
    a: 2,
    fn1:fn1
}
fn1() //undefined
obj.fn1() //2
/** 在这个例子里,两种不同的调用方法,产生的结果却完全不同
  *因为同样一个函数地址,它却被两个不同的变量所引用。
  *第一个fn1()被调用在全局环境下调用,而在全局对象window里,a没有赋值,因此结果为undefined
  *第二个obj.fn1()的调用是在对象obj环境下调用,因此指向obj.a===2
  *这种方法是隐式绑定
**/
  • 第四个小李子
function obj(a){
    this.a = a
}
var fn1 = new obj(2)
console.log(fn1.a) //2
//使用new构造函数,this指定的都是构造出来的新对象。
  • 第五个小李子
    另外,在dom的事件触发和事件监听中,函数内的this指向是用户所触发事件的元素。jQuery的事件监听同理,如果是事件委托,则与selector相匹配的元素。

  • 第六个小李子
    箭头函数内外this不变,因为箭头函数没有this


    即使使用了call()方法,赋值this,最终打印出来的箭头函数的this是window。
    那么我们在实际开发的时候,碰到有事件监听的情况下可以使用这个特性不改变this:

!function(){
var view = document.querySelector('#targetElement')
var controller = {
  view: null,
  init: function(){
    this.view = view
    this.bindEvents()
  }
  bindEvents:function(){
        window,onscroll(()=>{
        console.log(this.view)
    })
  }
}

以上是在没有使用call()apply()情况下,this的指向判断,但当使用过了call()apply()后,this的指向明显清晰了,因为我们可以根据自己的意愿随意更改this!

Ⅱ.call()apply()bind()

  • call()apply()

    1. 两者用法相似,都是调用函数体及改变函数体内的this指向.
    2. 不同的是,apply()传入的参数是一个数组,通常在执行可变参数的函数时可以使用apply(),将每个参数传入一个数组。
      调用方法如下:
      fn.call(this,arg1,arg2)
      fn.apply(this,[arg1,arg2)
    3. 改变this的一个简单例子
  • bind()
    bind() 允许我们在函数或者方法被调用时绑定 this 到指定对象上。
    例如:在js的DOM事件里,当某一事件被调用时,this会默认是事件调用的Node对象身上,此时我们可以使用bind()函数,绑定一个回调函数,改变this的指向。
    一个简单的小李子

  • 总结

  1. callapplybind都可以改变函数的this对象的指向。
  2. callapplybind除了第一个参数是this指向外,后面可以继续传参数。
  3. bind是返回回调函数,不是立即调用,而applycall是立即调用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容