从零开始学 Web 之 JS 高级(三)apply与call,bind,闭包和沙箱

简介: 大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......github:https://github.com/Daotin/Web微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/CSDN:https://blog.csdn.net/lvonve/在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

fgx.png

一、apply 和 call 方法

apply 和 call 都可以改变调用其的函数或方法中的 this 指向。

不同的是传入参数时,apply 有两个参数,第二个参数是数组;call 从第二个参数开始是调用其的函数的所有参数。

使用方法:

1、apply的使用语法:

函数名.apply(对象,[参数1, 参数2,... ]);

方法名.apply(对象,[参数1, 参数2,... ]);

2、call的使用语法:

函数名.call(对象,参数1, 参数2,... );

方法名.call(对象,参数1, 参数2,... );

1、函数调用apply和call

function f1(x, y) {
  console.log(x+y +this); // 这里面的this是window
  return x+y;
}

var r1 = f1.apply(null, [10,20]); // 打印30 window,传入的是null,所以this指向还是window
console.log(r1); // 30
var r2 = f1.call(null, 10,20);// 打印30 window
console.log(r2); // 30
//函数改变 this 的指向
var obj = {};

var r1 = f1.apply(obj, [10,20]); // 打印30 window,传入的是Obj,所以this指向是Obj
console.log(r1); // 30
var r2 = f1.call(obj, 10,20);// 打印30 Obj
console.log(r2); // 30

2、方法调用apply和call

// 方法改变 this 的指向
    function Person(age) {
        this.age = age;
    }
    Person.prototype.eat = function () {
        console.log(this.age); // this 指向实例对象
    };

    function Student(age) {
        this.age = age;
    }

    var per = new Person(18);
    var stu = new Student(20);

    per.eat.apply(stu); // 打印 20
    per.eat.call(stu); // 打印 20

由于 eat 方法已经指向了 Student 了,所以打印 20,而不是 18.

问题:我们知道函数也是对象,函数可以调用 apply 和 call 方法,但是这两个方法并不在这个函数这个对象的实例函数中,那么在哪里呢?

解答:所有的函数都是 Function 的实例对象,而 apply 和 call 就在 Function 构造函数的原型对象中。


二、bind方法

bind 是复制的意思,也可以改变调用其的函数或方法的 this 指向,参数可以在复制的时候传进去,也可以在复制之后调用的时候传进去。

使用语法:

1、函数名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个函数

2、方法名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个方法

1、函数调用 bind

function f1(x, y) {
    console.log(x + y + this);
}
// 1.参数在复制的时候传入
var ff = f1.bind(null,10,20); // 这只是复制的一份函数,不是调用,返回值才是
ff();

// 2.参数在调用的时候传入
var ff = f1.bind(null); // 这只是复制的一份函数,不是调用,返回值才是
ff(10,20);

2、方法调用 bind

function Person(age) {
    this.age = age;
}

Person.prototype.eat = function () {
    console.log(this.age); // this 指向实例对象
};

function Student(age) {
    this.age = age;
}

var per = new Person(18);
var stu = new Student(20);

var ff = per.eat.bind(stu);
ff(); // 20

三、闭包

1、闭包的概念

有一个函数 A 中有一个函数或者对象 B,那么函数或者对象 B 可以访问函数 A 中的数据,那么函数 A 的作用域就形成了闭包。

2、闭包的模式

函数模式的闭包:函数中包含函数。

对象模式的闭包:函数中包含对象。

3、闭包的作用

缓存数据,延长作用域链。

4、闭包的优缺点

也是缓存的数据,导致在闭包的范围内一直起作用。

5、闭包的应用

缓存数据,函数中的数据,外面可以使用。

如果想要缓存数据,就把这个数据放在外层的函数和里层的函数之间。这样不停的调用里层函数,相当于外层函数里的数据没有得到及时释放,就相当于缓存了数据。

// 函数闭包
function A() {
    var num = 10;
    return function () {
        return num++;
    }
}

var func = A();
console.log(func());
console.log(func());
console.log(func());
// 对象闭包
function A() {
    var num = 10;
    return {
        age: num++
    };
}
var func = A();
console.log(func.age);

四、沙箱

沙箱:一小块的真实环境,里面发生的事情不会影响到外面。相同的操作,相同的数据都不会和外面发生冲突。

作用:避免命名冲突。

比如:自调用函数里面就相当于一个沙箱环境。

(function (){
        
}());

五、区分伪数组和真数组

// 真数组
    var arr = [10,20,30];
    // 伪数组
    var obj = {
        0:10,
        1:20,
        2:30,
        length: 3
    };
    // 真数组的访问
    for(var i=0; i<arr.length; i++) {
        console.log("真数组的访问:"+arr[i]);
    }
    // 伪数组的访问
    for(var j=0; j<obj.length; j++) { // 错误:对象中没有length方法
        console.log("伪数组的访问:"+obj[j]);
    }

方法一、使用 length 来区分

这样看起来,真数组和伪数组就没法区别了。

但是真数组的长度 length 可以改变,伪数组不可以,貌似可以区分了。

但是,你还记得有个 arguement 这个伪数组(对象)的 length 是可以改变的,方法一区分失败。

方法二、使用数组的方法 forEach 来鉴别

因为每个数组都是 Array 的实例对象,而 forEach 在 Array 的原型对象中,所以其他的伪数组是不能使用的。方法二成功。

fgx.png

目录
相关文章
|
18天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
2天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
1天前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
8天前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
本文深入探讨了JavaScript中闭包的概念,从定义、作用域链和实际应用等方面进行了详细阐述。通过生动的比喻和实例代码,帮助读者理解闭包在函数执行上下文中的重要性,以及如何在实际开发中有效利用闭包解决复杂问题。同时,文章也指出了过度使用闭包可能导致的潜在问题,并给出了相应的优化建议。
|
10天前
|
人工智能 开发框架 前端开发
Web开发之Vue.js
Web开发之Vue.js
15 3
|
20天前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
70 1
|
20天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
28 0
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
4月前
|
JavaScript 前端开发
JavaScript中call()与apply()的作用与区别?
JavaScript中call()与apply()的作用与区别?
|
3月前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
40 0