Function 对象属性和方法

Function 对象

 

在 JavaScript 中， Function 对象是一个很核心的内容，它本身是一个对象，可以创建对象，也可以用于创建任何函数，所有函数都是一个 Function 对象。Function 对象的返回值可以是任何一种数据类型，虽然本身的属性和方法并不多，但却是最灵活最不可或缺的一个对象。
它提供了几个改变函数上下文的相关操作。
创建一个 Function 实例对象的方法：
  • var func = Function('a','console.log(a)')
  • var func = new Function('a','console.log(a)')
  • var func = function (a) {console.log(a)}
  • var func = (a)=> {console.log(a)}
  • function func(a) {console.log(a)}

 

Function 对象与其实例对象的属性和方法：

// Object.getOwnPropertyDescriptors(Function):
name                         : {value: "Function", writable: false, enumerable: false, configurable: true}
length                       : {value: 1, writable: false, enumerable: false, configurable: true}
prototype                    : {writable: false, enumerable: false, configurable: false, value: ƒ}

// Object.getOwnPropertyDescriptors(Function.prototype):
arguments                    : {enumerable: false, configurable: true, get: ƒ, set: ƒ}
constructor                  : {writable: true, enumerable: false, configurable: true, value: ƒ}
name                         : {value: "", writable: false, enumerable: false, configurable: true}
length                       : {value: 0, writable: false, enumerable: false, configurable: true}
toString                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
caller                       : {enumerable: false, configurable: true, get: ƒ, set: ƒ}
Symbol(Symbol.hasInstance)   : {writable: false, enumerable: false, configurable: false, value: ƒ}
apply                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
bind                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
call                         : {writable: true, enumerable: false, configurable: true, value: ƒ}

 

Function.prototype 常用属性

1、arguments（此api或将弃用，但仍能使用，严格模式下尽量别用）

  • arguments.length：获取函数实参的个数
  • arguments.callee：获取函数对象本身的引用
  • arguments.callee.length：获取函数形参的个数

Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用每个实际传入的参数。

示例：

function test (a,b,c,d) {
    console.log('len(实参个数):',arguments.length) // len(实参个数): 3
    console.log('callee(函数本身):',arguments.callee) // callee(函数本身): ƒ test (a,b,c,d) {...}
    console.log('callee.length(形参个数):',arguments.callee.length) // callee.length(形参个数): 4
    console.log('指定参数：',arguments[0],arguments[1],arguments[arguments.length - 1])// 指定参数： hello (3) [1, 2, 3] {a: 999}
} 
test('hello',[1,2,3],{a:999})

 

2.length :获取函数的接收参数(形参)个数。

function test (a,b,c,d,e,f,g) {
    console.log('len:',test.length) // len: 7
}
test()

 

Function.prototype 常用方法

1、call() : 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

语法：function.call(thisArg, arg1, arg2, ...)
参数：

  • thisArg（可选）：
    • 在 function 函数运行时使用的 this 值。
    • this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
  • arg1, arg2, ...：
    • 指定的参数列表。

返回值：使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

示例：

// call 的基本用法：fn.call第一个参数指向o，所以前三个参数this.a、this.b、this.c分别对应o的a、b、c，
// fn.call的第二部分参数（除第一个参数以外的参数）分别是fn函数原本的参数，对应d、e、f
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
fn.call(o,3,4,5) // 1 2 3 3 4 5


// 在子构造函数中，可以通过调用父构造函数的 call方法来实现继承。示例中，使用 Singer和 Writer 构造函数创建的对象实例都会拥有在 Person构造函数定义的 name属性 和 age属性，但 skill属性 是在各自的构造函数中定义的。
function Person(name, age) {
  this.name = name;
  this.age = age;
}

function Singer(name, age) {
  Person.call(this, name, age);
  this.skill = 'sing';
}

function Writer(name, age) {
  Person.call(this, name, age);
  this.skill = 'writing';
}

var ZXY = new Singer('学友', 20);
var LX = new Writer('树人', 30);

 

2、apply() : 调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

语法：function.apply(thisArg, [argsArray])
参数：

  • thisArg（必选）：
    • 在 function 函数运行时使用的 this 值。
    • this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
    • argsArray ：
    • 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 function 函数。
    • 如果该参数的值为 null 或  undefined，则表示不需要传入任何参数。

返回值：调用有指定this值和参数的函数的结果。

示例：

// apply的基本用法与 call一样，不同在第二部分参数：
// fn.apply 第一个参数指向o，所以前三个参数this.a、this.b、this.c分别对应o的a、b、c，
// fn.apply 的第二部分参数（除第一个参数以外的参数）是一个数组或类数组对象，数组里面每个元素分别对应fn函数原本的参数，示例中3，4，5分别对应d、e、f
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
var args = [3,4,5]
fn.apply(o,args) // 1 2 3 3 4 5

// 合并数组
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

 

3、bind() : 创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

语法：function.bind(thisArg[, arg1[, arg2[, ...]]])
参数：

  • thisArg：
    • 调用绑定函数时作为 this 参数传递给目标函数的值。
    • 如果使用new运算符构造绑定函数，则忽略该值。
    • 当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。
    • 如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。
  • arg1, arg2, ...：
    • 当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值：返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

示例：

// bind 的基本用法：fn.bind第一个参数指向o，所以前三个参数this.a、this.b、this.c分别对应o的a、b、c，
// fn.bind的第二部分参数（除第一个参数以外的参数）分别是fn函数原本的参数，对应d、e、f
// 需要注意的是bind返回一个未立即执行的函数，需要接收调用
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
var nfn = fn.bind(o,3,4,5); // nfn接收返回的函数
nfn() // 1 2 3 3 4 5

 

 

 

JavaScript 中的三大对象 (本地对象、内置对象、 宿主对象)

本地对象

 

内置对象

 

宿主对象

 

posted @ 2020-05-12 11:55  elfpower  阅读(1251)  评论(0)  编辑  收藏  举报