资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript中的函数

JavaScript中的函数

red_bricks / 3466人阅读

摘要：函数类型函数实际上是对象，因为每个函数都是这个构造函数的实例，具有构造函数定义的属性和方法。而我们将这个函数参数拿出来，就可以更直观的复用性更高的去编写这个函数，达到我们想要的效果。

函数类型

函数实际上是对象，因为每个函数都是Function这个构造函数的实例，具有Funtion构造函数定义的属性和方法。函数名实际上时指向函数对象的指针，说明这个问题，看如下代码：

    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. 没有重载

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

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:

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规定的作用域。e.g:

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue
GPU云服务器 云服务器 javascript中的函数 javascript中的 php中的变量函数 java中的根号函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96558.html

相关文章

  • JavaScript深入浅出

    摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

    blair 评论0 收藏0

  • JS程序

    摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0

  • 学习React之前你需要知道的的JavaScript基础知识

    摘要：和类在开始时遇到类组件，只是需要有关类的基础。毕竟，中的条件呈现仅再次显示大多数是而不是特定的任何内容。 在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用...

    bitkylin 评论0 收藏0

  • JavaScript中的面向对象（object-oriented）编程

    摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。 本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。 最近工作一直在用nodejs做开发，有了nodejs，...

    JerryZou 评论0 收藏0

  • 深入理解JavaScript，这一篇就够了

    摘要：也就是说，所有的函数和构造函数都是由生成，包括本身。如果只考虑构造函数和及其关联的原型对象，在不解决悬念的情况下，图形是这样的可以看到，每一个构造函数和它关联的原型对象构成一个环，而且每一个构造函数的属性无所指。 前言　　JavaScript 是我接触到的第二门编程语言，第一门是 C 语言。然后才是 C++、Java 还有其它一些什么。所以我对 JavaScript 是非常有感情的，毕...

    villainhr 评论0 收藏0

发表评论

登陆后可评论

0条评论

red_bricks

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<