Do you really understand these JS basic knowledge points?

This is the 9th day of my participation in the August More Text Challenge

Variable types and calculations

Typeof determines which types

• Identify all value types
• Identify the function
• Determine if it is a reference type (cannot be subdivided)

// Determine all value types
typeof undefined // undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
typeof Symbol('sdd')  // symbol

// Can determine the function
typeof console.log // function
typeof function(){} // function

// Can recognize the reference type.
typeof null // object
typeof [1.2] // object
typeof {a:123} // object
 
Copy the code

When to use === and when to use ==

• = =Abstract equality, comparison, implicit type conversion, and then value comparison
• = = =Strictly equal, the type and value of two values are compared

The difference between value types and reference types

• Value types: basic types, Number, String, Boolean, undefined, Null (point to Null Pointers, special reference type), Symbol, BigInt
• Reference types: Object, Array, Function, the Date, Map, Set, WeakSet, WeakMap

Variable evaluation – cast

• String splicing
• = =

  // if ==null, use ===
  let obj = {x:100}
  if(obj.a == null) {}/ / equivalent: if (obj. A = = null | | obj. A = = undefined) {}
  Copy the code

• If statements and logical operations
• Judge true/false

  The following are SERVICES variables and everything else are TRULY variables!!!!!0= = =false!!!!!NaN= = =false!!!!!' '= = =false!!!!!null= = =false!!!!!undefined= = =false!!!!!false= = =false
  Copy the code

// String concatenation
var a = 100 + 10 / / 100
var b = 100 + '10' / / 10010
var c = true + '10' // true10

// == operator
100= ='100' //true
0= =' ' //true
0= =false // true
false= =' ' // true
null= =undefined //true
[10] = =10 // true[] = =0 // true[] = =false // true! [] = =false // true
null= =false // false

/ / statements
var a = true
if(a){}
var b = 100
if(b){} // Convert the number to true
var c = ' '
if(c){} // Convert the empty string to false

// Logical operations
console.log(10&&0); // 0 converts 10 to true
console.log(' ' || 'abc'); // 'ABC' converts the empty string to false
console.log(!window.abc); // window. ABC is undefined and converts non-undefined to true

// Determine whether a variable will be considered true or false
var a = 100
console.log(!! a);// true
Copy the code

Handwritten deep copy

Read this article I do not believe you do not understand shallow copy, deep copy

Prototype and prototype chain

Thoroughly understand JS stereotypes, prototype chains, and inheritance

The class and inheritance

class

• constructor
• attribute
• methods

/ / class
class Student{
	constructor(name,age){
		this.name = name
		this.age = age
	}
	sayHi(){
		console.log(` name:The ${this.name}Age:The ${this.age}`)}}// Through the class new object/instance
const pp = new Student('fish'.18)
console.log(pp.name,pp.age) 18 / / the fish
pp.sayHi()  // Name: xiaoyu, age: 18

const cc = new Student('small C'.16)
console.log(cc.name,cc.age)
cc.sayHi()
Copy the code

• Each class has a prototype display
• Each instance has an implicit prototype proto
• Instance proto points to the prototype of the corresponding class

Execute rules

• Gets the property pp.name or executes the method pp.sayhi ()
• First look in its own properties and methods
• If it cannot be found, it automatically looks in __proto__

// class is actually a function, which is syntactic sugar
typeof People // function
typeof Student // function

// Implicit and display archetypes
pp.__proto__   // Implicit prototype
Student.prototype // Display the prototype
pp.__proto__ === Student.prototype // true

Student.prototype.__proto__
People.prototype
People.prototype === Student.prototype.__proto__  // true
Copy the code

inheritance

• extends
• Super (superclass)
• Extension and rewrite

/ / parent class
class People{
	constructor(name){
		this.name =name
	}
	eat(){
		console.log(`The ${this.name} eat something`)}}/ / subclass
class Student extends People{
	constructor(name,age){
		super(name)
		this.age = age
	}
	sayHi(){
		console.log(` name:The ${this.name}Age:The ${this.age}`)}}/ / subclass
class Teacher extends People{
	constructor(name,major){
		super(name)
		this.major = major
	}
	teach(){
		console.log(`The ${this.name}professorThe ${this.major}`)}}const pp = new Student('fish'.18)
console.log(pp.name,pp.age) 18 / / the fish
pp.sayHi()  // Name: xiaoyu, age: 18
pp.eat() // Fish eat something
/ / instance
const lu = new Teacher(Miss Lu.'Chinese')
console.log(lu.name,lu.major) // Miss Lu Chinese
lu.teach()  // Miss Lu teaches Chinese
pp.eat() // Miss Lu eats something
Copy the code

instanceof

// Refer to the above inheritance
pp instanceof Student // true
pp instanceof People // true
pp instanceof Object //true

[] instanceof Array // true
[] instanceof Object // true

{} instanceof Object // true
Copy the code

The title

How to determine an array

1. Object.prototype.toString.call()
2. Array.isArrray()
3. instanceof: Determines whether a variable is an instance of an object
4. Array.prototype.isPrototypeOfCheck if an Array is in the prototype chain of obj using isPrototypeOf()
5. constructor: returns a reference to the array function that created the object, which returns the corresponding constructor of the object

function isArray(obj){// return Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
  return Object.prototype.toString.call(obj) === '[object Array]';
}
function isArray(obj){return  Array.isArrray(obj);
}
function isArray(obj){return obj instanceof Array
}
function isArray(obj){return obj.constructor === Array
}
function isArray(obj){return Array.prototype.isPrototypeOf(obj)
}
Copy the code

Writing jquery

class jQuery{
	constructor(selector){
		const result = document.querySelectorAll(selector)
		const length = result.length
		for(let i=0; i<length; i++){this[i] = result[i]
		}
		this.length = length
		this.selector = selector
	}
	get(index){
		return this[index]
	}
	each(fn){
		for(let i=0; i<this.length; i++){const elem = this[i]
			fn(elem)
		}
	}
	on(type,fn){
		return this.each(elem= >{
			elem.addEventListener(type,fn,false)})}// Extend many DOM apis
}

/ / the plugin
jQuery.prototype.dialog = function(info){
	alert(info)
}
/ / build the wheels
class myJQuery extends jQuery{
	constructor(selector){
		super(selector)
	}
	// Extend your methods
	addClass(className){}}/ / call the demo
const $p = new jQuery('p')
$p.get(1)
$p.each(elem= >console.log(elem.nodeName))
$p.on('click'.() = >alert('clicked'))
$p.dialog('test')
Copy the code

Scope and closure

scope

• Global scope
• Function scope
• Block-level scope

Free variables

• A variable is not defined in the current scope, but is used
• Search through the upper scope, layer by layer, until you find it
• If the global scope is not found, XX is not defined

The special case of closure scope application has two manifestations:

• Functions are passed as arguments
• The function is returned as the return value

Lookup of a free variable: lookup of a parent scope at the place where the function is defined; Not in the execution place!!

// function as return value
function create(){
	let a = 100
	return function(){
		console.log(a)
	}
}
const fn = create()
let a = 200
fn()  / / 100

// function as argument
function print(fn){
	let a = 200
	fn()
}
let a = 100
function fn(){
	console.log(a)
}
print(fn) / / 100
Copy the code

How can I value this in different scenarios

This is checked at function execution time, not function definition time

• As a general function
• Use call Apply bind
• Called as an object method
• Called in the class method
• Arrow function

function fn1(){
	console.log(this)
}
fn1() // window

fn1.call({x:100}) // {x:100}

let fn2 = fn1.bind(x:200)
fn2() // {x:200}

const pp = {
	name:'pp'.sayHi(){
		// This is the current object
		console.log(this)},wait(){
		setTimeout(function(){
			// this === window
			console.log(this)})},wait2(){
		setTimeout(() = > {
			// This is the current object
			console.log(this)}}}class People{
	constructor(name){
		this.name = name
	}
	sayHi(){
		console.log(this)}}const pp = new People('Little Jade')
pp.sayHi() // point to the pp object
Copy the code

Handwritten bind

function fn1(a,b,c){
	console.log('this'.this) // this { x:100}
	console.log(a,b,c)  / / 10 20 to 30
	return 'this is fn1'
}
const fn2 = fn1.bind({x:100},10.20.30)
const res = fn2()
console.log(res) // this is fn1

The bind / / simulation
Function.prototype.bind1 = function(){
	// Split the parameters into arrays
	const args = Array.prototype.slice.call(arguments)

	// Get this (first item of array)
	const t = args.shift()
 	
 	//fn1.bind(...) The fn1
	const self = this

	// Return a function
	return function(){
		return self.apply(t,args)
	}
}
Copy the code

Closure application scenarios in real development

• Hidden data

// Closures hide data and only provide apis
function createCache(){
	const data = {} // The data in the closure is hidden from outside access
	return {
		set: function(key,value){
			data[key] = value 
		},
		get: function(key){
			return data[key]
		}
	}
}
const a = createCache()
a.set('a1'.100)
console.log(a.get(a1))
Copy the code