JS advanced
1, js Foundation
1. Data type
Classification:
Basic (value) types: num, string, boolean, null, undefined;
Object (Reference) type: object, function, array; (function, array is a special object)
2. Judge the data type
typeof: the result returns the data type, but all obejct returns the object
instanceof: judge the specific type of object and supplement typeof to object;
===Congruence number: undefined, null. Congruence can be used for judgment
let a = 123;
console.log(typeof a); // number
console.log(a instanceof number) // true
console.log()
Let b = null;
console.log(typeof b) // object
console.log(b === null) //true
// Instanceof object judgment
var c = {
d= [1,2,3];
g: funnction(){console.log("ooo)}
}
console.log(c instanceof object) // true
console.log(c.d instanceof Array,c.d instanceof Object) //true true
console.log(g.d instanceof Function, g.d instanceof Object) //true true
c.g() //Call g function and output "ooo"“
Instances: instance objects
function Person(name, age){ //Constructor, and the type is also an object object object
this.name = name;
this.age = age;
}
var p = new Person('tom', '12') // Create instance objects by type
Common interview questions:
1. What is the difference between undefined and null?
undefined: define unassigned
Null: assignment, the value is null
2. When is the value assigned?
null is the basic data type and typeof is the object
//The initial assignment is null, indicating that the assignment is an object;
var obj = null;
//At the end of the assignment, it represents the garbage object, which is recycled by the recycling mechanism
var b = null;
3. Relationship among data, memory and variables
Data: stored in memory, representing specific information, 0, 1, 0, 1;
Features: transitive, computable
Memory: memory module, the space (temporary) that can store data generated after power on;
Two data in a small memory: internally stored data, address value;
Memory classification: stack: global variable / local variable
Heaps: objects
Variable: variable quantity, component: variable name+Variable value, each variable corresponds to a piece of memory;
var obj = {name:'AA'}
console.log(obj.name)
What is the relationship between data memory variables?
Memory is the temporary space used to store data, and variables are the identification of memory;
Q: var a = xxx; What is saved in a
xxx is basic data: this data is saved;
xxx is the object, and the address value of the object is saved;
xxx is a variable that stores the contents of xxx (basic data or address value);
Q: Reference variable assignment problem?
Two reference variables point to the same object. One variable modifies the internal data of the object, and the other variable sees the modified data;
Two reference variables point to the same exclusive. One reference variable points to another object, and the other variable still executes the previous object
//Two reference variables point to the same object. One variable modifies the internal data of the object, and the other variable sees the modified data;
var obj1 = {
name:"Tom"
}
var obj2 = obj1 //
console.log(obj2.name); //Tom
obj2.age = 12
console.log(obj1.age) //12
function fn(obj){
obj.name = "Bob"
}
fn(obj1)
console.log(obj1.name); //Bob
console.log(obj2.name); //Bob
// Two reference variables point to the same exclusive. One reference variable points to another object, and the other variable still executes the previous object
var a = {age: 12}
var b = a;
a = {name: "Bob", age: 13}
console.log(a) //{name: 'Bob', age: 13}
console.log(b) //{age: 12}
Q: When js calls a function, is the variable parameter passed by value or reference?
pass by value
var a = 3;
function fn(a){
a = a + 1;
console.log(a) //4
}
fn(a);
console.log(a); // 3
Q: How does the JS engine manage memory?
- Memory claim period:
Allocate small memory space and get its use right;
Store data and perform repeated operations,
Free up small memory space - Free memory
Local variable: automatically released after the function is executed;
Global variables are not released;
Object: become a garbage object - garbage collection mechanism
4. Object
What is an object?
A container used to hold multiple data. An object represents a thing in reality.
Why use objects?
Unified management of multiple data
Object composition?
Attribute: attribute name + attribute value, attribute name: all strings;
Attribute value: any type.
Method: if the attribute value is a function, it is called a method.
How do I access data inside an object?
. Attribute name
5. Function
What is a function?
Encapsulation of n statements with specific functions. Only functions can be executed, and other data cannot be executed.
Why use functions?
Improve code reuse and facilitate reading and communication
How to define functions?
Function declaration
Function expression
// Function declaration
function fn1(){
console.log(1111);
}
// Function expression
var fn2 = function(){
console.log(222);
}
fn1();
fn2();
How is a function called?
Directly call test();
obj.test() is called through an object;
test.call/apply(obj)
var obj = {}
function test2(){
this.xxx= "llll"
}
// obj.test2() / / cannot be called like this
test2.call(obj) //You can call a function as a method that specifies any object
console.log(obj.xxx) //llll
6. Callback function
What is a callback function?
You defined it, you didn't tune it, but it did
Common callback functions?
Callback function of DOM event;
Timer callback function;
ajax request callback function;
Lifecycle callback function;
// Callback function of DOM event;
document.querySelector('button').onclick = function(){
alert(this.innerHTML)
}
// Timer callback function, timeout timer, cycle timer
setTimeout(function(){
alert("please on time")
}, 2000)
7. When Iife executes the function form immediately
immediately -Invoked Function Expression
Function: hide the implementation and will not pollute the external global namespace;
(function(){
var a = 3;
console.log(a)
})()
8. this of function
What is this?
There is a variable this inside all functions, and its value is the current object of the calling function;
If this is not specified, the value is window
How to determine the value of this?
test() :window
p.test() : p
new test(): newly created object
p.call(obj): point to obj
function Person(color){
console.log(this); // 1 output
this.color = color;
this.getColor = function(){
console.log(this); // 2 outputs
return this.color
};
this.setColor = function(color){
console.log(this); // 3 outputs
this.color = color;
}
}
Person("red") // Only one output is executed, and this points to window
var p = new Person('yellow'); // this points to p
p.getColor(); //2 outputs, this points to person {color: 'yellow', getcolor: ƒ, setColor: ƒ}
var obj = {};
p.setColor.call(obj, "black"); // this points to obj,
var test = p.setColor;
test(); // 3 outputs pointing to window
function fun1(){
function fun2(){
console.log(this);
}
fun2() //Point to window
}
2, Function advanced
1. Prototype and prototype chain
1.) prototype attribute of function:
Each function has a prototype attribute, which points to an object null object by default (i.e. prototype object);
There is a property constructor in the prototype object, which points to the function object;
2.) add attributes (usually methods) to prototype objects
Function: all instance objects of the function automatically own the properties (Methods) in the prototype
<script>
console.log(Date.prototype); //{constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, ...}
console.log(typeof Date.prototype); //object
function fun(){};
console.log(fun.prototype); //By default, it points to an object or an empty object
// There is a property constructor in the prototype object, which points to the function object;
console.log(Date.prototype.constructor === Date); //true
console.log(fun.prototype.constructor === fun); //true
</script>
Display prototype and implicit prototype
Each function has a prototype, that is, display prototype;
Each instance object has one__ proto__, Implicit prototype
The value of the implicit prototype of the object is the value of the display prototype of its corresponding constructor;
// 1. Each function has a prototype, that is, display prototype;
function fn(){}
console.log(fn.prototype);
// 2. Each instance object has one__ proto__, Implicit prototype
var fn = new Fn()
console.log(fn.__proto__);
// 3. The value of the implicit prototype of the object is the value of the display prototype of its corresponding constructor;
console.log(Fn.prototype === fn.__proto__);