JS 学习笔记 | 函数进阶

1.函数的定义和调用

1.1 函数的定义方式

1.1.1 函数声明

语法：

function func() {};

1.1.2 函数表达式

语法：

var func = function() {};

1.1.3 构造函数

语法：

var func = new Function("参数1", "参数2",..., "函数体");

注意：

  • Function 里面参数都必须是字符串格式
  • 第三种方式执行效率低，也不方便书写，所以使用较少。
  • 所有函数都是 Function 的实例（对象）
  • 函数也属于对象。

1.2 函数的调用

// 1.函数声明
function fn() {
    console.log("人生巅峰");
}
// fn();
// fn.call();

// 2.对象的方法
var o = {
    sayHi: function() {
        console.log("hi~");
    }
}
// o.sayHi();

// 3.构造函数
function Star() {};
// var star = new Star();

// 4.绑定事件函数
// btn.onclick = function() {};    // 点击了按钮就可以调用

// 5.定时器函数
// setInterval(function() {}, 1000);    // 定时器 1s 调用一次

// 6.立即执行函数
(function() {
    console.log("立即执行函数");
})();

2.this

2.1 函数内部的 this 指向

这些 this 的指向，是当我们调用函数的时候确定的，调用方式不同决定了不同的 this 指向，一般指向调用者。

在这里插入图片描述

// 函数不同的调用方式决定了 this 不同的值
// 1.普通函数的 this 指向 window
function func() {
    console.log("普通函数的 this " + this);
}
func();

// 2.对象的方法的 this 指向 对象 o
var o = {
    sayHi: function() {
        console.log("对象方法的 this " + this);
    }
}
o.sayHi();

// 3.构造函数的 this 指向 star 这个实例对象，
// 原型对象里面的 this 指向的也是 star 这个实例对象。
function Star() {};
Star.prototype.sing = function() {}
var star = new Star();

// 4.绑定事件函数的 this 指向的是函数的调用者，也就是 btn 这个按钮对象
var btn = document.querySelector("button");
btn.onclick = function() {
    console.log("绑定事件函数䣌 this " + this);
}

// 5.定时器函数的 this 指向的是 window
setInterval(function() {
    console.log("定时器的 this " + this);
}, 1000);

// 6.立即执行函数的 this 指向的是 window
(function() {
    console.log("立即执行函数额 this " + this);
})();

2.2 改变函数内部 this 指向

2.2.1 使用 call 方法

call() 方法简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

应用场景：使用 call 完成继承

function Father(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}

function Son(uname, age, sex) {
    Father.call(this, uname, age, sex);
}
var son = new Son("ldh", 18, "男");
console.log(son);

2.2.2 使用 apply 方法

apply() 方法简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

应用场景：经常跟数组有关

var arr = [1, 66, 4, 99];
console.log(Math.max.apply(Math, arr));

apply 和 call 主要的不同在于参数传递的形式不同，前者必须指定每一个参数，后者则是以数组的形式传递的。

2.2.3 使用 bind 方法

bind() 方法不会调用函数，但是能改变函数内部的 this 指向，返回的是原函数改变 this 之后产生的新函数，如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind。

语法：

fun.bind(thisArg, arg1, arg2, ...);
  • thisArg：在 fun 函数运行时指定的 this 值
  • arg1，arg2：传递的其它参数
  • 返回由指定的 this 值和初始化参数构造的 原函数拷贝。

应用场景：不调用函数改变 this 指向。

var o = {
    name:"lyman"
}

function fn() {
    console.log(this);
}
var f = fn.bind(o);
f();

2.2.4 call、apply、bind三者异同

  • 共同点：都可以改变 this 指向
  • 不同点
    • call 和 apply 都会调用函数，并改变 this 指向
    • call 和 apply 需要传递的参数不同，call 传递参数使用逗号分开，apply 传递数组。
    • bind 不能调用函数，但是可以改变 this 指向。
  • 应用场景：
    • call 经常用于继承
    • apply 经常跟数组有关系，比如借助数学对象实现最大值和最小值函数
    • bing 不会调用函数，但是还想改变 this 指向，比如改变定时器内部的 this 指向。

3.严格模式

3.1 什么是严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上的浏览器中才被支持，旧版本的浏览器会忽略严格模式。
严格模式对正常的 JavaScript 语义做了一些更改：

  • 消除了 JavaScript 语法的一些不合理，不严谨之处，减少了一些怪异行为。
  • 消除代码的一些不安全之处，保证代码运行的安全。
  • 提高编译器效率，增加运行速度。
  • 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 JavaScript 做好铺垫。比如一些保留字：class ，enum，export，extends，import，super 不能当作变量名。

3.2 开启严格模式

严格模式可以应用到整个脚本或个别函数中，因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

  • 为脚本开启严格模式
    有的 script 脚本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以将整个脚本文件放在一个立即执行的匿名函数中，这样独立创建一个作用域而不影响其它 script 脚本文件。 
    <script>
    "use strict";
    // 下面的 JS 代码就会按照严格模式执行
</script>
  • 为函数开启严格模式
    要给某个函数开启严格模式，需要把 "use strict"; 放在函数体内所有语句之前。 
    <script>
    (function() {
        // 在这个自调用函数中开启严格模式，但是在函数外还是普通模式
        "use strict";
    })()
</script>

3.3 严格模式中的变化

严格模式对 JavaScript 的语法和行为，都做出了一些改变。

3.3.1 变量规定

  • 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式下禁用这种写法，变量必须先用 var 命令声明在使用。 
    "use strict";
num = 10;
console.log(num);
    这种写法将会报错。
  • 严禁删除已经声明了的变量 
    "use strict";
var num = 10;
console.log(num);
delete num;

3.3.2 严格模式下 this 指向问题

  • 以前在全局作用域函数中的 this 指向 window 对象，严格模式下全局作用域函数中的 this 指向 undefined 。 
    "use strict";
function fn() {
    console.log(this);
}
fn();
  • 在普通模式下，如果调用构造函数不加 new，会当作普通函数来调用。严格模式下不加 new 调用构造函数，this 会报错。 
    "use strict";
function Star() {
    this.sex ="男";
}

Star();
  • 定时器中的 this 还是指向 window。 
    "use strict";
setTimeout(function() {
    console.log(this);
}, 2000)

3.3.3 函数相关

  • 在非严格模式下函数可以拥有两个同名参数，但是在严格模式下会报错。 
    "use strict";
function fn(a, a) {
    console.log(a + a);
} 
fn(1, 2);
  • 新版本的 JavaScript 会引入“块级作用域”（ES6中已引入），为了与新版本接轨，不允许在非函数代码块中声明函数。

4.高阶函数

高阶函数是对其它函数操作的函数，它接收函数作为参数或将函数作为返回值输出。

例如：

function fn(callback) {
    callback && callback();
}
fn(function() {console.log("hi~")})

或者

function fn(callback) {
    return function() {};
}
fn();

此时 fn() 就是一个高阶函数，函数也是一种数据类型，同样可以作为参数传递给另外一个参数使用。最典型的就是作为回调函数。

需求：将 div 移动，移动完成后将颜色改变为紫色。

$("div").animate({left: 500, top: 500}, function() {
  $("div").css("backgroundColor", "purple");
})

5.闭包

5.1 变量作用域

变量根据作用域的不同分为两种：全局变量和局部变量。

  • 函数内部可以使用全局变量
  • 在函数外面不可以使用局部变量。
  • 当函数执行完成后，函数内部的局部变量就会被销毁。

5.2 什么是闭包

闭包（closure） 指有权访问另一个函数作用域中变量的函数。

例如：

function fn() {
    var num= 10;
    function fun() {
        console.log(num);
    }
    fun();
}
fn();

以上例子中，函数 fun 访问到了 fn 中定义的 num，所以 fn 是一个闭包。
注意：被访问的变量所在的函数被称为闭包函数。

5.3 闭包的作用

需求：在 fn 外部访问 fn 内部定义的变量

function fn() {
    var num= 10;
    function fun() {
        console.log(num);
    }
    return fun;
}
var f = fn();
f();

返回的变量 ·f· 类似于

var f = function() {
    console.log(num);
}

总结：闭包的作用就是延伸了变量的作用范围。

6.递归

6.1 什么是递归

如果一个函数内部可以调用其本身，那么这个函数就是递归函数。

6.2 使用递归求阶乘

// 利用递归计算 1~n 的阶乘
function calculate(n) {
    if (n == 0) return 0;
    if (n == 1) return 1;
    return calculate(n- 1) * n;
}

6.3 使用递归求斐波那契数列

// 利用递归求斐波那契数列 1, 1, 2, 3, 5, 8, 13
function fibonacci(n) {
    if (n == 1 || n == 2) return 1;
    return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(6));

6.4 使用递归遍历数据

var data = [{
    id: 1,
    name: "家电",
    goods: [{
        id: 11,
        gname: "冰箱"
    }, {
        id: 12,
        gname: "洗衣机"
    }]
}, {
    id: 2,
    name: "服饰"
}]
// 输入 id 号，就返回数据对象。
// 1. 利用 forEach 遍历里面的每一个对象
function getId(json, id) {
    var o = {};
    json.forEach(function(value) {
        if (value.id === id) {
            o = value;
            return value;
        } else if (value.goods && value.goods.length != 0) {
            o = getId(value.goods, id);
        }
    })
    return o;   
}
console.log(getId(data, 1));
console.log(getId(data, 2));
console.log(getId(data, 11));
console.log(getId(data, 12));

6.5 深拷贝和浅拷贝

  • 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。
  • 深拷贝拷贝多层，每一级别的数据都会拷贝。

6.5.1 使用 for-in 实现浅拷贝

var obj = {
  id: 1,
    name: "lyman",
    msg: {
        age: 18
    }
}

var o = {};
for (var key in obj) {
    o[key] = obj[key];
}
o.msg.age = 20;
console.log(obj);
console.log(o);

6.5.2 使用 Object.assign 实现浅拷贝（ES6新增）

语法：

Object.assign(target, source);

例如：

Object.assign(o, obj);

o.msg.age = 20;
console.log(obj);
console.log(o);

6.5.3 使用递归实现深拷贝

var obj = {
    id:1,
    name: "lyman",
    msg: {
        age: 18
    },
    color: ["pink", "purple"]
}

var o = {};

// 封装函数
function deepCopy(newObj, oldObj) {
    for (var k in oldObj) {
        // 判断属性值属于哪种数据类型
        // 1.获取属性值
        var item = oldObj[k];
        // 2.判断这个值是否是数组
        if (item instanceof Array) {
            newObj[k] = [];
            deepCopy(newObj[k], item);
        } else if (item instanceof Object) {
            // 3.判断这个值是否是对象
            newObj[k] = {};
            deepCopy(newObj[k], item);
        } else {
            // 4.简单数据类型
            newObj[k] = item;
        }
    }
}
deepCopy(o, obj);
o.msg.age = 20;
console.log(o);
console.log(obj);
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,254评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,875评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,682评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,896评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,015评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,152评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,208评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,962评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,388评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,551评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,186评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2赞 351