1, jsoo introduction
1. Concept: jsoo is called js object-oriented, or js advanced.
oo: object oriented - class based (java)
oop: Object Oriented Programming
Object oriented programming: classes and objects (classes are abstractions of objects and objects are instances of classes)
Object oriented is an idea that can be used in any language and js.
2. js object-oriented (prototype object, instance object) - based on prototype, only objects have no classes
(prototype object is the abstraction of instance object, and instance object is the instance of prototype object)
Prototype objects are templates. Example:
function prototyPlane(x,y,imgSrc,speed){ this.x = x; this.y = y; this.imgSrc = imgSrc; this.speed = speed; this.moveDown = function(){ } this.init = function(){ } } let newPlane = new prototypePlane();
3. Three characteristics of object-oriented: encapsulation, inheritance and polymorphism
Encapsulation: hide the internal implementation and expose the interface (key points)
Inheritance: commonality
Polymorphism: personality
Extension: process oriented - function based (C language, C + +)
The top-level Object is Object (null)
2, Methods for creating objects
1. Constructor method
function test(name,age){ //let this = new Object(); this.name = name; this.age = age; //return this; } new test();
2. Factory method
function test(name,age){ let obj = new Object(); obj.name = name; obj.age = age; obj.hi = function(){} return obj; }
3. Prototype
function test(){ } test.prototype.name = xxx; test.prototype.age = xxx;
4,
var obj = new Object(); obj.name = "zhangsan"; obj.age = 18; obj.sayHi = function(){ }
5,
var obj = { //Grammar sugar name:'lisi', age:16, sayHi:function(){ } }
6. Key points
Object.create(); //a key var obj = Object.create(null); //Equivalent to var obj = new Object() or var obj = {} Object.create(proto,[propertiesObject])
3, Reference type (heap) and original type (stack)
By default, the copy of reference type is a shallow copy. How to make it a deep copy?
var arr = [123,545,34]; function change(arr2){ arr2 = []; } change(arr); console.log(arr);
Original type copy: equivalent to money copy
Copy of reference type: equivalent to copy of card
Garbage collection mechanism (preventing memory overflow): when no variable points to it, it will be recycled.
IV__ proto__ attribute
__ proto__ Attribute: js language internal implementation, a private attribute. Trace its own source (the top-level object. Object. _proto_ is null).
Not supported in IE browser__ proto__ Properties.
Instance object__ proto__
prototype attribute: it is specially provided for users to operate prototypes. Only function objects have this property.
What is a function object? What is a normal object?
Function object: typeof object. If it is function, it means it is a function object.
__ proto__ Different from prototype:
1, __ proto__ Is a private attribute, which is not supported by IE; prototype is a development interface.
2,__ proto__ It is an attribute used to trace its own prototype within js, which is common to any object; The prototype attribute is only available for function attributes.
3. It is recommended to use the prototype attribute for prototype related operations.
xiaoai.__proto__ === Student.prototype //true xiaoai.__proto__.constrctor === Student //true Student.prototype.constrctor === Student //true
5, Prototype chain
Working mode: start from yourself and look up layer by layer until you find it. If it is not found, it returns undefined.
Prototype object, new object, two different objects.
Note: if you want to inherit properties (constructors) defined in another object, you need to think of the prototype only as an example of another object.
Usage scenario: processing date
Date.prototype.toDoubleyongString = function(str){ var d = new Date(str); var year = d.getFullYear(); }
6, Operation of object
1. Destroy object
var obj = new Object(); obj = null;
2. Delete an object's properties
var zhangsan = { name:'zhangsan', age:18 } delete zhangsan.age;
3. Check whether an object is an instance of a constructor
Checked object instanceof constructor: returns true or false.
4. Judge whether an object includes a property: return true or false (judge on the whole prototype chain)
in keyword, example:
console.log("name" in zhangsan);
5. Judge whether it is the property hasOwnProperty of the object itself
zhangsan.hasOwnProperty("toString")
7, Scope
Global variable: a variable defined outside a function
Local variable: a variable defined within a function
Note: all global variables can be accessed; A local variable is accessible only to the function that defines it.
Promotion of variables and functions
The definition of variables and the definition of functions will be improved
(Methods of arrays in shallow copy, deep copy, for...in, for...of, es6)
Principle: high cohesion, low coupling