资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JavaScript函数学习笔记

JavaScript函数学习笔记

wua_wua2012 / 2833人阅读

摘要：在中通过关键字方式调用的函数都被认为是构造函数。这个新创建的对象的被指向到构造函数的。上的方法不起效果当然你要是这样的形式指定了返回的内容，它自然会原样返回啦工厂模型为了不使用关键字，构造函数必须显式的返回一个值。

个人博客原址
函数 
函数式一块javascript代码，定义一次，可以被多次调用与执行，JS中的函数也是对象，所以JS函数可以像其他对象那样操作，和传递，所以也称函数对象
函数的参数列表相当于函数的人口，return相当于函数的出口，函数本身就是一种数据类型，函数是可以嵌套定义的。
函数基础 　定义函数的方式

有三种方式可以定义函数。并且有着如下区别：

定义方式： function 语句（函数声明） Function 构造函数 函数表达式
解析时机： 优先解析(声明前置) 顺序解析 顺序解析(声明提前，赋值不提前)
允许匿名： 有名 匿名 匿名
形式： 句子 表达式 表达式
性质： 静态 动态 静态
作用域： 具有函数的作用域 顶级函数(顶级作用域) 具有函数作用域

主要有下面两个需要注意的地方：

理解Function 构造函数的顶级作用域，直接看代码就好：很直观就可以表示出来

var a = 1;
function test() {
    var a  = 2;
    var func = new Function("console.info(a)");
    func();
}
test();//1;

函数表达式的多种创建方式：

// 最简单的形式，将函数赋值给一个变量
var add = function(a,b){
    //do ..
}
// 立即执行匿名函数表达式IIFE
(function() {
    //do ..
})();
// 将函数当成返回值
return function(){
    //do ..
}
//命名式函数表达式NFE
var add  = function foo(a,b){
    // do..
    // 只在foo函数内部可以使用foo这个名称(用途如：递归调用)（在新版浏览器下可用）
    // 外部访问不到foo这个函数名
}
函数的参数 
在JS中函数的参数分为形式参数和实际参数两个概念
function test(a,b,c,d) {
    console.log(test.length)//4
    return a+b+c;
}
console.info(test(10,20,30))//60
console.log(test.length)//4
console.log(arguments.length);//3,表示实际接受的参数个数
console.log(arguments[0]);//10，传进来的第一个参数===a

在 函数内部 ，JS使用了一个特别的变量arguments的 类数组对象（以后再来说这个问题），用来接受传入函数的实际参数列表。

function arg(a,b,c){
    arguments[0] = 1;
    console.info(a,b,c)
}
arg(143,456,6)//1 456 6

普通模式下可以直接对于arguments对象进行更改，上面的代码就是一个很直观的例子，我们直接更改了第一个参数的值，但建议不要去试图更改arguments对象的属性，不符合规范。
注：严格模式下arguments对象是实参的一个副本，所以上面的改动不会生效(自行尝试)

构造函数

什么是构造函数？

其实构造函数只是普通函数的一个变种，它可以当成普通的函数方式调用，也能通过new关键字来调用。 在Javascript中通过 new 关键字方式调用的函数都被认为是构造函数。
在构造函数内部（ 也就是被调用的函数内） this 指向新创建的对象Object。 这个新创建的对象的 prototype 被指向到构造函数的 prototype。
如果被调用的函数没有显式的 return 表达式，则隐式的会返回 this 对象(也就是新创建的对象)。

这就来看看实际中不同情况下的区别：

使用new关键字吗，不指定return语句

function Person() {
    this.father = "allen";
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var hong = new Person();
console.info( new Person());//Person {father: "allen"}
hong.getFatherName();//allen

使用new关键字，并且指定return语句

function Person() {
    this.father = "allen";
    return "1";
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var hong = new Person();
console.info( hong);//Person {father: "allen"}
hong.getFatherName();//allen

//把return的值换成一个对象：
//return "1";----------->return {a:1};或者return new String("12");
var hong = new Person();
console.info( hong);//Object {a: 1}
hong.getFatherName();//[脚本错误]

不使用new关键字，当成普通函数直接调用

function Person() {
    this.father = "allen";
    return function(){
        return {}
    };
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var bai = Person();
console.info(bai);//undefined
console.info(father);//allen
bai.getFatherName();//[脚本错误]

通过这三段不同情况的示例代码，应该可以发现一些区别：

使用new关键字吗，不指定return语句时，将隐式的会返回 this 对象(返也就是新创建的对象)。

使用new关键字，并且指定return语句时，需分为两种情况：

返回值为标准类型，显式的 return 表达式将不会影响返回结果

返回值为对象，将直接返回你显式设置的对象

不使用new关键字，当成普通函数直接调用时，this指向全局对象 window，所以内部this指定的属性与方法，全部都暴露到全局，导致全局变量污染。prototype上的方法不起效果(当然你要是这样的形式指定了return返回的内容，它自然会原样返回啦！)

工厂模型

为了不使用new关键字，构造函数必须显式的返回一个值。

function createPerson(name, age, sex) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    var private = 2;//私有外部不可访问
    obj.sayName = function(){
        console.info(this.name)
    }
    obj.getPrivate = function() {
        return private;
    }
    return obj;
}
var p1 = createPerson("小红",21,"女")
var p2 = createPerson("小国",22,"男")
console.info(p1.name);//小红
console.info(p2.age);//22
p2.sayName();//小国

这就是一个简单的工厂模型，使用或者不使用 new 关键字没有功能性的区别。这样的方式比起 new的调用方式不容易出错，并且可以充分利用 私有变量带来的便利， 但是也有下面这样的问题

占用更多的内存，因为新创建的对象不能共享原型上的方法。

为了实现继承，工厂方法需要从另外一个对象拷贝所有属性，或者把一个对象作为新创建对象的原型。

这一篇博客最主要是对于函数学习的笔记，不过用自己的话来描述总描述的还不够清晰。
有错误之处请指出！

私有云 服务器托管 javascript学习笔记 学习笔记 学习笔记一 基础学习笔记

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

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

相关文章

  • 重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

    摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

    mayaohua 评论0 收藏0

  • 重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

    摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

    yy736044583 评论0 收藏0

  • 重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

    摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

    xingpingz 评论0 收藏0

  • 重学前端学习笔记（十九）--JavaScript中的函数

    摘要：方法在中定义的函数。这种声明方式会定义一个生成器函数，它返回一个对象。类用定义的类，实际上也是函数。调用函数时使用的引用，决定了函数执行时刻的值。表示当为时，取全局对象，对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

    genefy 评论0 收藏0

  • 重学前端学习笔记（十九）--JavaScript中的函数

    摘要：方法在中定义的函数。这种声明方式会定义一个生成器函数，它返回一个对象。类用定义的类，实际上也是函数。调用函数时使用的引用，决定了函数执行时刻的值。表示当为时，取全局对象，对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

    lcodecorex 评论0 收藏0

发表评论

登陆后可评论

0条评论

wua_wua2012

男|高级讲师
我要私信

TA的文章

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