Phase 4 - jsoo

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(); = name;
    this.age = age;
    //return this;
new test();

         2. Factory method

function test(name,age){
    let obj = new Object(); = name;
    obj.age = age;
    obj.hi = function(){}
    return obj;

         3. Prototype

function test(){

} = xxx;
test.prototype.age = xxx;


var obj = new Object(); = "zhangsan";
obj.age = 18;
obj.sayHi = function(){



var obj = {    //Grammar sugar


         6. Key points

Object.create();    //a key
var obj = Object.create(null);    //Equivalent to var obj = new Object() or var obj = {}

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 = [];

        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 = {
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


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...of, es6)

Principle: high cohesion, low coupling

Posted on Wed, 13 Oct 2021 21:00:28 -0400 by neoform