温故而知新篇之《JavaScript忍者秘籍(第二版)》学习总结(二)——函数进阶篇

哦哈哈 2020-11-11 00:10:11
javascript 温故而知新 温故 而知 新篇


前言

这本书的电子版我已经在学习总结第一篇已经放了下载链接了,可以去查看
温故而,知新篇之《JavaScript忍者秘籍(第二版)学习总结(一)——函数篇

最近看了一句话,觉得挺不错的,分享下:

“不要把自己的努力看的太重,你自己觉得做这个很努力,做那个很努力;当你奔跑、跌倒的同时,有人比你已经先站起来跑了。
其实,努力应该是生活的常态,不应该被认为是稀缺、可贵的品质
而不是说 你努力了,你就应该和别人在很多事情上不一样。你应该不断的提升自己才是努力的意义。

我简直了,文邹邹的~~~哈哈哈哈。
来来来,说正题


arguments参数

arguments对象有一个名为length的属性,表示实参的确切个数。通过数组索引的方式可以获取单个参数的值,例如,arguments[2]将获取第三个参数

function(a,b,c){
//arguments[0]=a
//arguments[1]=b
console.log(arguments[2] === c) // true
}

你可能会被它的用法误导,毕竟它有length属性,而且可以通过数组下标的方式访问到每一个元素。但它并非JavaScript数组,如果你尝试在arguments对象上使用数组的方法(例如,上一章中用到的sort方法),会发现最终会报错。arguments对象仅是一个类数组的结构,在使用中要尤为注意。

arguments对象作为函数参数的别名

function infiltrate(person) {
arguments[0] = 'ninja';
person === 'ninja' // true
//同理
person = 'gardener';
arguments[0] === 'gardener' // true
}

注意️:

严格模式避免使用arguments别名

"use strict"; ⇽--- 开启严格模式
function infiltrate(person) {
arguments[0] = 'ninja'; ⇽--- 改变第一个参数”
arguments[0] === 'ninja' // true
person === 'gardener' // false
}

this参数:函数上下文

函数调用

我们可以通过4种方式调用一个函数,每种方式之间有一些细微差别。
  • 作为一个函数(function)——skulk(),直接被调用。
  • 作为一个方法(method)——ninja.skulk(),关联在一个对象上,实现面向对象编程。
  • 作为一个构造函数(constructor)——new Ninja(),实例化一个新的对象。
  • 通过函数的apply或者call方法——skulk.apply(ninja)或者skulk.call(ninja)。

这里要补充下,书中有说,作为函数直接被调用、作为方法被调用
这段内容,我当时在理解的时候,以为自己理解了。后来做了几道题才明白这个意思。

var a=10
function b(){
console.log(a) // 10 // 当前语义环境
console.log(this.a) // 20 执时环境
}
var c={
a:20,
ninja:b
}
console.log(c.ninja())

注意️:

上面的例子中,b不是c的一个方法,b是一个独立的函数。
当通过方法饮用去调用函数时,c.ninja(),对函数调用时,上下文就是c;

this,
当直接通过函数名调用,也就是将函数作为函数调用时,因为是在非严格模式下执行,因此预期的函数上下文结果应当是全局上下文(window)

作为构造函数调用

function Ninja() {
this.skulk = function() {
return this;
};
} ⇽--- 构造函数创建一个对象,并在该对象也就是函数上下文上添加一个属性skulk。这个skulk方法再次返回函数上下文,从而能让我们在函数外部检测函数上下文
var ninja1 = new Ninja();
var ninja2 = new Ninja(); ⇽--- 通过关键字new调用构造函数创建两个新对象,变量ninja1和变量ninja2分别引用了这两个新对象
console.log(ninja1.skulk() === ninja1,
"The 1st ninja is skulking");
console.log(ninja2.skulk() === ninja2,
"The 2nd ninja is skulking"); ⇽--- 检测已创建对象中的skulk方法。每个方法都应该返回自身已创建的对象 

当使用关键字new调用函数时,会创建一个空的对象实例并将其设置为构造函数的上下文(this参数)

注意️:

面试的时候总是会问到。
一般来讲,当调用构造函数时会发生一系列特殊的操作
使用关键字new调用函数会触发以下几个动作。

1.创建一个新的空对象。
2.该对象作为this参数传递给构造函数,从而成为构造函数的函数上下文。
3.新构造的对象作为new运算符的返回值(除了我们很快要提到的情况之外)。
image

构造函数的返回值

  • 如果构造函数返回一个对象,则该对象将作为整个表达式的值返回,而传入构造函数的this将被丢弃。
  • 但是,如果构造函数返回的是非对象类型,则忽略返回值,返回新创建的对象。

箭头函数 this

var Button={
clicked:false,
click:()=>{
this.clicked = true;
console.log(this) // window
}
}
Button.click()
function Button(){
clicked=false
click=()=>{
this.clicked = true;
console.log(this) // window
}
}
Button()
click()

注意️:

由于this值是在箭头函数创建时确定的
`在全局代码中定义对象字面量,在字面量中定义箭头函数,那么箭头函数内的this指向全局window对象`

小结:

  • 当调用函数时,除了传入在函数定义中显式声明的参数之外,同时还传入两个隐式参数:arguments与this
arguments参数是传入函数的所有参数的集合。具有length属性,表示传入参数的个数,通过arguments参数还可获取那些与函数形参不匹配的参数。在非严格模式下,arguments对象是函数参数的别名,修改arguments对象会修改函数实参,可以通过严格模式避免修改函数实参。
this表示函数上下文,即与函数调用相关联的对象。函数的定义方式和调用方式决定了this的取值。
  • 函数的调用方式有4种。
作为函数调用:skulk()。
作为方法调用:ninja.skulk()。
作为构造函数调用:new Ninja()。
通过apply与call方法调用:skulk.apply(ninja)或skulk.call(ninja)。
  • 函数的调用方式影响this的取值。
如果作为函数调用,在非严格模式下,this指向全局window对象;在严格模式下,this指向undefined。
作为方法调用,this通常指向调用的对象。
作为构造函数调用,this指向新创建的对象。
通过call或apply调用,this指向call或apply的第一个参数。
  • 箭头函数没有单独的this值,this在箭头函数创建时确定。
  • 所有函数均可使用bind方法,创建新函数,并绑定到bind方法传入的参数上。被绑定的函数与原始函数具有一致的行为。

摘录来自: [美] John Resig Bear Bibeault Josip Maras. “JavaScript忍者秘籍(第2版)。” iBooks.

版权声明
本文为[哦哈哈]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037790313

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple