函数也是对象

194 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

函数也是对象

面向对象里面认为:万物皆对象。所以很好理解,函数其实也是对象

// 1.所有的函数都能调用方法
fn.call()
// 2.函数能点属性
fn.prototype
fn.__proto__
// 3. 所有的函数都是 Function 构造的实例对象
var fn = new Function()

Function构造函数

在js里面,所有的函数都是Function构造函数的实例对象

function fn(){}
console.log(fn instanceof Function)
console.dir(fn)

Function原型

image-20200914183811949.png

image-20200914183835434.png

函数借用

  • 函数封装的目的是复用代码。但是如果方法写在了不同的对象上,这些对象之间又不是继承关系,如果对象具有同样的特征和功能,我们就需要多写一次代码

函数中的this

  • 需要了解函数借用,我们使用的是call/apply/bind三个方法,这个三个方法都在Function的原型上,所以所有的函数都能调用。
  • 但是这三个方法都有一个作用,就是修改函数的this指向,但是如果要修改,我们就要先知道这些this原本指向谁,才知道是否需要修改。
  • 函数在不同使用场景的this指向如下
// 函数作为一个普通函数 , 里面的this指向window对象
function() fn(){}
// 函数作为事件处理程序 里面this通常指向事件源,但是也有指向window的
btn.onclick = function(){}
btn.addEventListener('click',function(){})
bnt.attachEvent('onclick',function(){})
// 函数作为构造函数 , 里面this指向实例对象
function Person(name,age){}
// 函数作为回调函数 , 里面this通常指向window
setTimeout(function(){},2000);
// 作为对象的方法 , 里面的this指向实例对象
var obj = {sayHi:function(){}}
Person.prototype.sayHi = function(){}
// 箭头函数,里面的this指向上级作用域
()=>{}

call/apply/bind

call的作用

  • 1.立刻调用函数

  • 2.修改函数this指向

函数.call(新this,参数1,参数2,...)
  • 使用场景:
  1. 借用构造函数
  2. 伪数组转换成数组
  3. 判断原生对象类型

apply的作用

  1. 立刻调用函数
  2. 修改函数this指向
函数.call(新this,[参数1,参数2,...])
  • 使用场景:
  1. 借用构造函数
  2. 伪数组借用数组方法 bind的作用
  3. 修改函数this指向
  4. 返回一个新的函数
var fn = 函数.bind(新this,参数1,参数2,...)
fn();

使用场景:

  1. 修改回调函数的this