Learning summary of "JavaScript Ninja Secrets (Second Edition)" (2) -- advanced function

Oh, ha ha 2020-11-11 00:10:11
learning summary javascript ninja secrets


Preface

The electronic version of this book I've been studying and summarizing. The first one has a download link , You can check it out
In retrospect , Know the new chapter 《JavaScript Ninja Secret ( The second edition ) Learning summary ( One )—— Function part

Recently I read a sentence , I think it's very good , Under the share :

“ Don't take your efforts too seriously , You think it's hard to do it yourself , It's hard to do that ; When you run 、 When you fall down , Someone got up and ran before you .
Actually , Hard work should be the norm of life , It should not be considered scarce 、 Valuable quality .
Rather than say You worked hard , You should be different from others in many things . You should constantly improve yourself, which is the meaning of your efforts .

I'm just , Wen Zou's ~~~ Ha ha ha ha .
Come on, come on , Get to the point


arguments Parameters

arguments The object has a name by length Properties of , Represents the exact number of arguments . adopt Array index can get the value of a single parameter , for example ,arguments[2] Will get the third parameter

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

You may be misled by its usage , After all It has length attribute , And it can go through Array subscript access to each element . But it Is not JavaScript Array , If you try to arguments Methods that use arrays on objects ( for example , In the last chapter sort Method ), You'll find that you end up with an error .arguments The object is just a Class array structure , We should pay special attention to .

arguments Object as an alias for function parameters

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

Be careful ️:

Strict patterns avoid the use of arguments Alias

"use strict"; ⇽--- Turn on strict mode
function infiltrate(person) {
arguments[0] = 'ninja'; ⇽--- Change the first parameter ”
arguments[0] === 'ninja' // true
person === 'gardener' // false
}

this Parameters : Function context

Function call

 We can go through 4 To call a function , There are some subtle differences between each of them .
  • As a function (function)——skulk(), Directly called .
  • As a way (method)——ninja.skulk(), Relating to an object , Implement object-oriented programming .
  • As a constructor (constructor)——new Ninja(), Instantiate a new object .
  • Through function apply perhaps call Method ——skulk.apply(ninja) perhaps skulk.call(ninja).

I want to add here , The book says , Called directly as a function 、 Called as a method .
This passage is , When I was understanding , I think I understand . Later, I did a few questions to understand this meaning .

var a=10
function b(){
console.log(a) // 10 // The current semantic environment
console.log(this.a) // 20 The time environment
}
var c={
a:20,
ninja:b
}
console.log(c.ninja())

Be careful ️:

In the example above ,b No c One way ,b It's a separate function .
When you call a function through a method drink ,c.ninja(), When calling a function , The context is c;

this,
When calling directly through the function name , That is, when a function is called as a function , Because it's executed in a non strict mode , Therefore, the expected function context result should be the global context (window)

Call... As a constructor

function Ninja() {
this.skulk = function() {
return this;
};
} ⇽--- Constructor to create an object , And add an attribute to the object, that is, the function context skulk. This skulk Method returns the function context again , This allows us to detect the function context outside the function
var ninja1 = new Ninja();
var ninja2 = new Ninja(); ⇽--- By keyword new Create two new object constructors , Variable ninja1 And variables ninja2 These two new objects are referenced respectively
console.log(ninja1.skulk() === ninja1,
"The 1st ninja is skulking");
console.log(ninja2.skulk() === ninja2,
"The 2nd ninja is skulking"); ⇽--- Detect... In created objects skulk Method . Each method should return its own created object 

When using keywords new When you call a function , An empty object instance is created and set as the context of the constructor (this Parameters )

Be careful ️:

When you interview, you will always ask .
In general , When a constructor is called, a series of special operations occur
Use keywords new Call function The following actions will trigger .

1. Create a new empty object .
2. The object is this Parameter to constructor , This becomes the function context of the constructor .
3. The newly constructed object is new The return value of the operator ( In addition to what we're going to talk about soon ).
image

Return value of constructor

  • If the constructor returns an object , The object is returned as the value of the entire expression , And pass in the constructor this Will be discarded .
  • however , If the constructor returns a non object type , The return value is ignored , Return the newly created object .

Arrow function 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()

Be careful ️:

 because this The value is determined when the arrow function is created
` Define object literal in global code , Define the arrow function in the literal , So... In the arrow function this Point to the big picture window object `

Summary :

  • When a function is called , In addition to passing in parameters explicitly declared in the function definition , Two implicit parameters are also passed in :arguments And this.
arguments An argument is a collection of all the parameters passed in to the function . have length attribute , Represents the number of parameters passed in , adopt arguments Parameters can also get parameters that do not match the formal parameters of the function . In a non-strict mode ,arguments Object is an alias for a function parameter , modify arguments Object will modify the function arguments , You can avoid modifying function arguments in strict mode .
this Represents the context of a function , The object associated with the function call . The way the function is defined and called determines this The value of .
  • Functions can be called in the following ways 4 Kind of .
Call as function :skulk().
As method call :ninja.skulk().
Call... As a constructor :new Ninja().
adopt apply And call Method call :skulk.apply(ninja) or skulk.call(ninja).
  • The way the function is called affects this The value of .
If called as a function , In a non-strict mode ,this Point to the big picture window object ; In strict mode ,this Point to undefined.
As method call ,this Usually points to the object being called .
Call... As a constructor ,this Points to the newly created object .
adopt call or apply call ,this Point to call or apply The first parameter of .
  • There is no separate arrow function this value ,this Determine when the arrow function is created .
  • All functions can use bind Method , Create a new function , And bind to bind On the parameters passed in by the method . The bound function has the same behavior as the original function .

Excerpt from : [ beautiful ] John Resig Bear Bibeault Josip Maras. “JavaScript Ninja Secret ( The first 2 edition ).” iBooks.

版权声明
本文为[Oh, ha ha]所创,转载请带上原文链接,感谢

  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