8.this

1.举例说说apply方法和call方法的作用和区别

2.读下面代码,写程序结果

  1. function identify () {
  2. return this.name.toUpperCase()
  3. }
  4. function speek () {
  5. var greeting = 'hello, 我是' + identify.call(this)
  6. console.log(greeting)
  7. }
  8. var p1 = {
  9. name: 'xiaoHong'
  10. }
  11. var p2 = {
  12. name: 'XiaoLi'
  13. }
  14. identify.call(p1) // 输出?
  15. identify.call(p2) // 输出?
  16. speek.call(p1) // 输出?
  17. speek.call(p2) // 输出?

3.读下面代码,写程序结果

  1. function foo (num) {
  2. console.log('foo:' + num)
  3. this.count++
  4. }
  5. foo.count = 0
  6. for (var i = 0; i < 10; i++) {
  7. if ( i > 5) {
  8. foo(i)
  9. }
  10. }
  11. console.log('foo.count被调用了多少次?:'+foo.count)

4.this到底是什么?

  1. 1this的绑定和函数的声明位置没有关系,只取决于函数的调用方式
  2. 2、当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里调用、函数的调用方式、传入的参数等信息,this就是这个活动记录的一个属性,会在函数执行的过程中用到

5.读下面代码,写出运行结果(知识点,默认绑定)

  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var a = 2
  5. foo() //输出?
  6. function foo () {
  7. "use strict"
  8. console.log(this.a)
  9. }
  10. var a = 2
  11. foo() // 输出?
  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var a = 2
  5. ;(function () {
  6. "use strict"
  7. foo()
  8. })()

6.读下面代码,写出运行结果(知识点,隐式绑定)

  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var obj = {
  5. a: 2,
  6. foo: foo
  7. }
  8. obj.foo() // 输出?
  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var obj2 = {
  5. a: 42,
  6. foo: foo
  7. }
  8. var obj1 = {
  9. a: 2,
  10. obj2: obj2
  11. }
  12. obj1.obj2.foo() //输出?

7.读下面代码,写出运行结果(知识点,绑定丢失)

  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var obj = {
  5. a: 2,
  6. foo: foo
  7. }
  8. var bar = obj.foo
  9. var a = '我是全局属性a'
  10. bar() //输出?
  1. function foo () {
  2. console.log(this.a)
  3. }
  4. function doFoo (fn) {
  5. fn()
  6. }
  7. var obj = {
  8. a: 2,
  9. foo: foo
  10. }
  11. var a = '我是全局变量a'
  12. doFoo(obj.foo) //输出?
  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var obj = {
  5. a: 2,
  6. foo: foo
  7. }
  8. var a = '我是全局变量a'
  9. setTimeout(obj.foo, 100) // 输出

8.读下面代码,写出运行结果(知识点,call)

  1. function foo () {
  2. console.log(this.a)
  3. }
  4. var obj = {
  5. a: 2
  6. }
  7. foo.call(obj) //输出多少?

思考,如何解决绑定丢失问题?直接使用call方法能不能实现?

9.读下面代码,写出运行结果(知识点,硬绑定)

  1. function foo (something) {
  2. console.log(this.a, something)
  3. return this.a + something
  4. }
  5. var obj = {
  6. a: 2
  7. }
  8. var bar = function () {
  9. return foo.apply(obj, arguments)
  10. }
  11. var b = bar(3) //输出多少?
  12. console.log(b) //输出多少?

10.简单写一个通用的辅助函数bind

  1. function foo (something) {
  2. console.log(this.a, something)
  3. return this.a + something
  4. }
  5. function bind(fn, obj) {
  6. // 补充代码
  7. ...
  8. }
  9. var obj = {
  10. a: 2
  11. }
  12. var bar = bind(foo, obj)
  13. var b = bar(3) // 2 3
  14. console.log(b) // 5

11.读下面代码,写出运行结果(知识点,new绑定)

  1. function foo (a) {
  2. this.a = a
  3. }
  4. var bar = new foo(2)
  5. console.log(bar.a) //输出多少?

12.读下面代码,写出运行结果(知识点,箭头函数的this)

  1. function foo () {
  2. return (a) => {
  3. console.log(this.a)
  4. }
  5. }
  6. var obj1 = {
  7. a: 2
  8. }
  9. var obj2 = {
  10. a: 3
  11. }
  12. var bar = foo.call(obj1)
  13. bar.call(obj2) //输出多少?
  1. function foo() {
  2. setTimeout(() => {
  3. console.log(this.a)
  4. }, 100)
  5. }
  6. var obj = {
  7. a: 2
  8. }
  9. foo.call(obj) //输出多少?

13.总结判断this指向的方法

  1. 1. 函数是否在new中调用?如果是的话this指向的是新创建的对象
  2. 2.函数是否通过callapply或者硬绑定调用?如果是的话,this指向的是指定的对象
  3. 3.函数是否在某个上下文对象中调用?如果是的话,this指向的是那个上下文对象
  4. 4.如果都不是的话,使用默认绑定,如果在严格模式下,绑定到undefined,否则指向全局对象

螺钉课堂视频课程地址:http://edu.nodeing.com

js基础练习题(3)的更多相关文章

  1. js基础练习题(1)

    1.字符串 视频教程地址: js基础练习题 1.如何连接两个或者两个以上字符串? var cssname = 'box' var num = 1 var html = '<div class=& ...

  2. js基础练习题(2)

    5.函数 1.按要求封装两个函数 1.封装一个函数,要求输入字符串转化成数组弹出 2.封装一个函数,要求能求出三个数中的最小值,注意:不准使用js内置函数 2.封装一个函数,求参数的和,注意:参数不固 ...

  3. js基础练习题(6)

    10.其他 1.选择题 var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Nodei ...

  4. js基础练习题(4)

    9.对象 阅读代码,回答问题 function User(name) { var name1 = name; this.name2 = name; function getName1() { retu ...

  5. js基础练习--控制多组图片切换

    js基础练习题,一个按钮控制两组图片的切换,做这题的时候我忽然想到了将num1.mun2……都存放在一个数组中,根据索引值匹配到对应相应组的图片,这样不管有多少组图片都简单的搞定切换,可惜js基础都没 ...

  6. JS 基础学习随想

    2012年就已经接触过了js,给我的印象:这是一门谈不上复杂的语言.大概这就是所谓的学的越浅,用的越少,觉得自己会的东西好像得更多吧!开始做基础练习题的时候觉得好像都十分简单.可是后来在做到对象数组的 ...

  7. 【2017-03-28】JS基础、windows对象、history对象、location对象

    一.JS基础 JS - javaScript 1.js功能: 1).进行数据的运算.2).控制浏览器的一些功能.3).控制元素(属性.内容.样式) js引用位置: 可以放在html页的任意位置. 推荐 ...

  8. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  9. Linux基础练习题(二)

    Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...

随机推荐

  1. Java实现 LeetCode 677 键值映射(字典树)

    677. 键值映射 实现一个 MapSum 类里的两个方法,insert 和 sum. 对于方法 insert,你将得到一对(字符串,整数)的键值对.字符串表示键,整数表示值.如果键已经存在,那么原来 ...

  2. Java实现 蓝桥杯VIP 算法提高 计算器

    算法提高 计算器 时间限制:1.0s 内存限制:256.0MB [问题描述] 王小二的计算器上面的LED显示屏坏掉了,于是他找到了在计算器维修与应用系学习的你来为他修计算器. 屏幕上可以显示0~9的数 ...

  3. Java实现 LeetCode 102 二叉树的层次遍历

    102. 二叉树的层次遍历 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 2 ...

  4. Java实现奇偶数排序

    1 问题描述 给定一个整数数组,请调整 数组中数的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分.要求时间复杂度为O(n). 2 解决方案 2.1 一头一尾指针往中间扫描法 pack ...

  5. 记一次mysql修复错误数据问题

    问题描述 之前做的一个服务端配合硬件端的项目,今天突然在微信上跟我讲在管理后台订单列表里的设备编号看不见后3位数字. 原因查找 看了下数据库表发现原因是因为订单表的设备编号长度限制了16位(开发时跟硬 ...

  6. 如何解决ubuntu 12.04重启后出现waiting for network configuration和网络标志消失问题

    如何解决ubuntu 12.04重启后出现waiting for network configuration和网络标志消失问题 作为菜鸟的我在学着设置网络后,重启电脑后显示 waiting forne ...

  7. 03-Python基础2

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...

  8. 线性表 & 散列表

    线性表: 数据排成一条线一样的机构,每个线性表上的数据最多只有前后两个方向, 包括 数组,链表,队列,栈. 非线性表 : 数据之间并不是简单的前后关系,有二叉树.图等. 散列表(基于 数组支持按照下标 ...

  9. CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...

  10. virtualbox 基于nat模式搭建局域网并且和宿主机通信

    1.VIRTUALbox 2.两台虚拟机,设置网络为DHCP方式 检查文件确认是dhcp模式不是的百度搜索修改:/etc/sysconfig/network-scripts/ifcfg-enps3(网 ...