编程知识 cdmana.com

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

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]所创,转载请带上原文链接,感谢

Scroll to Top