您的位置:晶晶的博客>前端>JavaScript核心:Function属性和相关方法

JavaScript核心:Function属性和相关方法

Function构造函数,创建一个新的Function对象。 在JavaScript中, 每个函数实际上都是一个Function对象,绝大多数情况下不需要使用Function构造函数来构造新函数和方法,直接使用函数声明语句和函数表达式语法。

语法:new Function ([arg1[, arg2[, ...argN]],] functionBody)

arg1, arg2, ... argN 被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串,或者一个用逗号分隔的有效字符串的列表;例如“×”,“theValue”,或“A,B”。

functionBody一个含有包括函数定义的JavaScript语句的字符串。

全局的Function对象没有自己的属性和方法, 但是因为它本身也是函数,所以它也会通过原型链从Function.prototype上继承部分属性和方法。

Function的属性

Function.lengthFunction.constructor

length 是函数对象的一个属性值,指该函数有多少个必须要传入的参数,那些已定义了默认值的参数不算在内,与之对比的是, arguments.length是函数被调用时实际传参的个数。

Function构造函数也是一个Function,其length值为1;Function原型对象的length为0

// 例子1
typeof Function.constructor // function
typeof Function.prototype // function

Function.prototype.length // 0
Function.prototype.constructor.length // 1

Function的方法

Function.prototype.apply()

语法:fun.apply(thisArg[, argsArray])

thisArg 在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

argsArray 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

Function.prototype.call()

语法:fun.call(thisArg[, arg1[, arg2[, ...]]])

thisArg 在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ... 指定的参数列表。

Function.prototype.bind()

语法:fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,该参数无效。

arg1, arg2, ... 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。

apply、call和bind的区别

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
obj.bind(thisObj, [arg1, arg2, ...]);

call和apply两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。而bind与call、apply的唯一区别就是bind方法仅执行绑定逻辑,并不会执行绑定的对象或函数。

唯一区别是apply接受的是数组参数,call接受的是连续参数。

// 例子1 
function add(j, k){
    return j+k;
}
function sub(j, k){
    return j-k;
}

add(5,3); //8
add.call(sub, 5, 3); //8 sub指向了add的this 实际执行了add方法或者说在sub中执行了add
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

// 例子2
var Parent = function(){
    this.name = "yyj";
    this.age = 22;
}
var child = {};
console.log(child);//Object {} ,空对象
Parent.call(child);
console.log(child); //Object {name: "yyj", age: 22} //实现了child对象继承Parent对象属性(以及方法)的对象继承


// 例子3
function add(a, b){
    console.log(this);
}
function sub(a, b){
    console.log(this);
}

add(1,2); //直接执行函数 输出window对象本身 <==> add的this指向了全局对象
sub.apply(add, [1, 2]); // 数组参数绑定执行  输出add本身
sub.call(add, 1, 2); // 多参数绑定执行  输出add本身
sub.bind(add, 1, 2)(); // bind方法多参数绑定 花括号执行  输出add本身
转载请注明本文标题和链接:《JavaScript核心:Function属性和相关方法

相关推荐

网友评论1

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    学习了

    QQ 7个月前 (05-29) 回复