0

0

JavaScript函数怎么用?JavaScript函数的属性和方法的介绍

不言

不言

发布时间:2018-08-03 17:19:30

|

1843人浏览过

|

来源于php中文网

原创

javascript函数是什么?javascript中的函数实际上是对象,因为每个函数都是function这个构造函数的实例,具有funtion构造函数定义的属性和方法。下面我们就来具体看看javascript函数的属性和方法的介绍。

函数名实际上是指向函数对象的指针,看如下代码:

    function sum(a,b) {
        return a + b;
    }
    // 相当于把sum的引用地址传递给sum2。
    // 注意:不带圆括号的函数名是访问函数指针,而非调用函数
    var sum2 = sum; 
    sum2(1,2) // 3
    sum = null;
    sum(2,3) // undefined // 将sum的内存回收,即sum的引用地址变了
    sum2(2,3) //5 // 但sum2 还是指向原来的内存地址

上面这个代码可以说明函数名实际上是指向函数对象的指针这个问题。对于上述问题理解之后我们可以进行如下的分析:

1、没有重载

理解了上面之后,重载相当于给函数变量重新修改了引用的值,因此后面会覆盖前面的,很容易理解了。

立即学习Java免费学习笔记(深入)”;

2、函数提升

其实和变量提升类似,就是声明型函数和表达式定义函数的区别,很简单

3、作为值的函数

因为函数名本身是变量,所以可以作为值进行传递,这里有一个很好的例子,也是一个很好的编程思想,如下:

function getSomeFunction(fn,arg) {
    return fn(arg);
} 
function add(num) {
    return num + 10;
}
function getGreeting(name) {
    return `Hello ${name}`;
}
getSomeFunction(add,5) // 15
getSomeFunction(getGreeting,'andy') // Hello andy

还可以从一个函数中返回另一个函数。例如我们在用数组的一些排序方法或者迭代方法的时候,因为传递进去的都是一个函数变量作为参数,所以这个参数我们可以用“外部函数返回函数”的方法进行编写,这样做的好处是,返回的函数可以把我们”特定想要规定”的参数传递进去进行计算,例如

// 规定利用哪个属性进行排序,如果不填则代表数组从大到小排序
function sortArgFuntion(compareProperty) { //compareProperty是上文中特定想要规定的参数

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是数组的值,则用常规的方法
            if (val1 > val2) {
                return 1;
            } else if (val1 < val2) {
                return -1;
            } else {
                return 0;
            }
        } else {    // 如果排序的是对象的属性则用该方法
            if (val1[compareProperty] > val2[compareProperty]) {
                return 1;
            } else if (val1[compareProperty] < val2[compareProperty]) {
                return -1;
            } else {
                return 0;
            }
        }

    }
}
var data = [{
    name: 'andy',
    age: 25
}, {
    name: 'Nf',
    age: 29
}]
data.sort(sortArgFuntion('name'))

sort函数的参数是个函数,用于将数组进行重排序。而我们将这个函数参数拿出来,就可以更直观的、复用性更高的去编写这个函数,达到我们想要的效果。同时需要仔细揣摩,理解函数返回函数的精髓和独到之处

4.函数内部属性

函数内部有两个特殊变量

  • arguments

  • this

arguments

是类数组对象,何为类数组对象呢?可以通过序号进行数组式的访问(如obj[1]),并且有length属性(对象你不定义length属性,是没有length的).类数组只有索引值和长度,没有数组的各种方法,所以如果要类数组调用数组的方法,就需要使用Array.prototype.method.call 来实现

this

this是JavaScript非常容易混淆和复杂的一个知识点,他代表什么完全取决于调用位置,我会但列出一篇总结this。e.g:

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载
window.color = 'red';
var o = {color:"blue"};
function sayColor() {
    console.log(this.color)
}
sayColor(); // red 因为调用位置是全局
o.sayColor = sayColor;
o.sayColor(); // blue 因为调用位置是o的对象里

从上面例子中我们要知道,函数名字仅仅是一个指针,虽然执行环境不同,全局的sayColor()和函数中的o.sayColor()指向的都是同一个函数

caller

es5新加的,他返回当前函数(必须是函数,对象不行)的调用环境,如果调用环境是全局,则返回null。有两种用法,一种是函数名加caller,一种是arguments.callee.caller

    function outer() {
        console.log(outer.caller); //null
        inner();
    };
    function inner() {
        console.log(inner.caller); // outer里的代码
    }

5、函数的属性和方法

因为函数也是对象,所以也有属性和方法;函数里面有length和prototype两个属性,length指传入形参的个数
function add(num1,num2) {}  console.log(add.length) // 2

propertype

对于引用类型而言,propertype是保存所有实例方法的真正所在。在创建自定义引用类型以及实现继承,它的作用及其关键(到底多关键暂时还不太理解,尤其是继承这个词:)) es5中propertype不可枚举,因此不能遍历。

apply() 和 call()

两个参数,第一个参数是在哪个作用域运行,第二个参数apply是传入的Array或者arguments对象,call是传入每个值,其余他俩一模一样。这是其中一个例子,用来说明apply和call的作用:

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    sayColor(); // red
    sayColor.call(this); // red 
    sayColor.call(window); // red
    sayColor.call(o); // blue

如果不用call的话我们需要这样做:

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    o.sayColor = sayColor;
    o.sayColor(); //blue

所以对比可以一目了然,call一个最大的作用是实现了对象和方法的解耦

bind方法

bind方法用来构建一个函数的实例,其this对象指向bind规定的作用域。

例如:

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue

相关文章推荐:

javascript函数

Javascript 普通函数和构造函数的区别

JavaScript中函数声明、调用详解

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号