object

Classification of objects

• Built in object
  • Objects defined by ES standards can be used in any implementation of ES
  • For example: Math String Number Boolean Function
• Host object
  • At present, the objects provided by the running environment of JS mainly refer to the objects provided by the browser
  • For example: BOM DOM console document
• custom object
  • Objects created by developers themselves

Basic operation of object

// Create an object
var obj = new Object();
console.log(typeof obj); // object

// Add attributes to objects | modify attributes
obj.name = "Sheng Wang";
obj.age = 22;
obj.gender = "male";
console.log(obj); // {name: "Sheng Wang", age: 22, gender: "male"}

// Read properties in object
console.log(obj.name); // Sheng Wang
console.log(obj.age); // 22
// The advantage of reading in this way is that variables can be placed in brackets
console.log(obj["gender"]); // male
console.log(obj["hello"]); // undefined

// Delete attribute
delete obj.name;
console.log(obj.name); // undefined

// Checks whether the object contains the specified attribute
console.log("age" in obj); // true

// Object Literal 
var obj1 = {
  name: "Sheng Wang",
  age: 20
};
console.log(typeof obj1); // object

// Enumerating properties in objects
var obj = {
  name: "Feidu",
  age: 22,
  gender: "male",
  address: "Yancheng",
};
for (var item in obj) {
  console.log(item); // name, age, gender, address
  console.log(obj[item]); // Feidu, 22, male, Yancheng
}

function

Function definition and call

// Create a function object
var fun = new Function();
console.log(typeof fun); // function

// You can pass the code to be encapsulated to the constructor as a string
var fun1 = new Function("console.log('toot toot')");

// Call function
fun1();

// Actual use: function declaration
function fun2(param1, param2) {
  console.log(param1 + "and" + param2);
}
fun2("Feidu", "Luo Wenzhou");

// In practice: function expression
var fun3 = function (param1, param2) {
	console.log(param1 + "and" + param2);
};
fun3("Jiang Tian", "Sheng Wang");

Functions can also be used as arguments

// Functions can also be used as arguments
function fun(a) {
  a();
}
fun(function () {
  console.log("dudu");
});

Execute function now

(function() {
  alert("I am an anonymous function");
})();

Scope

Refers to the scope of a variable

Global scope:

• The JS code written directly in the script tag is in the global scope
• Global scopes are created when the page is open and destroyed when the page is closed
• There is a global object window in the global scope, which represents the window of the browser. It is created by the browser and can be used directly
• All variables created in the global scope will be saved as the properties of the window object a
• All functions created in the global scope will be saved as methods of window objects alert()
• All variables in the global scope are global variables, which can be accessed in any part of the page

Variable declaration in advance: variables declared with var keyword will be declared before all code execution (but will not be assigned)

console.log("a = " + a); // a = undefined
var a = 123;

The code above is equivalent to

var a;
console.log("a = " + a); // a = undefined
a = 123;

However, if var is not used, an error will be reported

console.log("a = " + a);
a = 123;

The declaration of function is advanced: the function created in the form of function declaration, it will be created before all code is executed, so the function can be called before function declaration.

f1(); // f1
f2(); // report errors
function f1() {
  console.log("f1");
}
// The function expression will not be created ahead of time, so the call will be wrong before the declaration.
var f2 = function () {
  console.log("f2");
};

Function scope

• The function scope is created when calling the function. After the function is executed, the function scope is destroyed
• Each time a function is called, a new function scope will be created, which are independent of each other
• Variables in the global scope can be accessed in the function scope, but variables in the function scope cannot be accessed in the global scope
• When operating a variable in the scope of a function, it will first look for it in its own scope. If there is one, it will be used directly. If there is no one, it will look for it in the upper scope
• To access global variables in a function, you can use the window object
• The declaration advance attribute also exists in the function scope
• Variables that are not declared with var in the function will become global variables
• Defining formal parameters is equivalent to declaring variables in the function scope

this

• When the parser calls a function, it will pass an implicit parameter this into the function every time
• this refers to the context object of a function execution
• this will point to different objects depending on the calling method of the function
  1. When called as a function, this is window
  2. When called as a method, this is the object that calls the method
  3. When called as a constructor, this is the newly created object

Constructor

Execution process of constructor:

1. Create a new object immediately
2. Set the new object to this in the function
3. Execute the code in the function line by line
4. Returns the newly created object as a return value

An object created with the same constructor is called a class object, a constructor is also called a class, and an object created through a constructor is called an instance of the class

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var person = new Person("dudu", 25);
console.log(person); // Person {name: "dudu", age: 25}
// Use instanceof to check whether an object is an instance of a class
console.log(person instanceof Person); // true
// All objects are descendants of Object
console.log(person instanceof Object); // true

Prototype object

/*
For each function we create, the parser will add an attribute prototype to the function, and the object corresponding to this attribute is the prototype object
*/
function Person() {}
console.log(Person.prototype);
/*
If the function is called as a normal function, prototype has no effect
 When a function is called in the form of a constructor, the object it creates will have an implicit attribute pointing to the prototype object of the constructor
 Can pass__ proto__ To access this property
*/
var person = new Person();
console.log(person.__proto__);
console.log(person.__proto__ == Person.prototype); // true
/*
The prototype object is equivalent to a common area, which can be accessed by all instances of the same class
 The common contents of the object can be uniformly set into the prototype object
 When we access a property or method of an object, it will first look for it in the object itself and use it directly if there is one
 If not, it will be searched in the prototype object. If it is found, it will be used directly
*/
Person.prototype.a = 123;
console.log(person.a); // 123

person.a = 456;
console.log(person.a); // 456
/*
When you create a constructor, you can uniformly add the properties and methods common to these objects to the prototype object of the constructor
 In this way, each object can have these properties and methods without adding them separately for each object and affecting the global scope
*/
Person.prototype.sayHello = function () {
  alert("Hello!");
};
person.sayHello();

Prototype chain

function MyClass(params) {}
var mc = new MyClass();
console.log(mc.name); // undefined

MyClass.prototype.name = "In prototype name";
console.log(mc.name); // name in prototype
/*
When using in to check whether an attribute is contained in an object, if it is not in the object but in the prototype, it will also return true
*/
console.log("name" in mc); // true
/*
Use the object's hasOwnProperty to check whether the object itself contains the property
*/
console.log(mc.hasOwnProperty("name")); // false

console.log(mc.hasOwnProperty("hasOwnProperty")); // false
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty")); // false
/*
Prototype objects are also objects, and there are prototypes
 When we use an object's attribute or method, we will first look for it in ourselves. If there is one, we will use it directly
 If not, search in the prototype object. If yes, use it directly
 If not, go to the prototype of the prototype and look for it until the prototype of the Object object is found. The prototype of the Object object has no prototype
 If it is still not found at this time, it returns undefined
*/
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); // true
console.log(mc.__proto__.__proto__.__proto__); // null

toString

function Person(name, age, gender) {
  this.name = name;
  this.gender = gender;
  this.age = age;
}

var p1 = new Person("Feidu", 18, "male");
/*
When we print an object directly on the page, it is actually the return value of the toString() method of the output object
*/
console.log(p1); // [object Object]

console.log(p1.__proto__.hasOwnProperty("toString")); // false
console.log(p1.__proto__.__proto__.hasOwnProperty("toString")); // true
/*
You can add a new toString method to the object to modify the output format (similar to overriding the parent class method)
*/
Person.prototype.toString = function () {
  return (
    "name = " + this.name + ", age = " + this.age + ", gender = " + this.gender
  );
};
console.log(p1.toString()); // name = Feidu, age = 18, gender = male