JavaScript OOP classes and objects

Object

• What is an object

　　　　All things in JavaScript are objects: strings, numbers, arrays, functions ... In addition, JavaScript allows custom objects to be customized.
In a word, everything is an object in JavaScript.

• How to create an object

Use {} to create an object    var user = {             ' name ': ' Jay Chou ',                 ' age ': 35    

• Construction, prototype, __proto__

Constructor always points to the constructor that creates the current object. var arr = [];console.log (arr.constructor = = = = Array); Truevar Foo = function () {};console.log (foo.constructor = = = function); true//is instantiated by a constructor with a obj object var obj = new Foo (); Console.log (Obj.constructor = = = Foo); Trueconsole.log (Obj.constructor.constructor = = = Function); True

Each function has a default property of prototype, and this prototype constructor is the default point for this function. function person (name) {    this.name = name;}; Person.prototype.getName = function () {    return this.name;}; var p = new Person ("Jack"), console.log (p.constructor = = = person);  Trueconsole.log (Person.prototype.constructor = = = person); Trueconsole.log (P.constructor.prototype.constructor = = = person); True

here the prototype and the prototype chain directly

This is the online comparison of the spread of

Here's the one you painted.

the creation of a class

　　Although JS is the object-based language of the door, there is no concept of class, although the reserved class keyword, but before ES6 is unusable. Therefore, you can use constructors to simulate the creation of classes, which are pseudo-classes. The so-called "constructor", in fact, is a normal function, but the internal use of this variables. Using an operator on a constructor new enables you to generate an instance, and the this variable is bound to the instance object. Each constructor has a prototype property that points to another object. All properties and methods of this object are inherited by an instance of the constructor. This means that we can define the invariant properties and methods directly prototype on the object.

    function User () {              this.name;      }  Define a User's working method User.prototype.work = function () {alert (this.name+ "in Work");}
var u1 = new User ("Jay Chou");

This keyword

This represents the current object, if this is used within the global scope, refers to the current Page Object window, and if this is used in the function, the this refers to what is called based on what object the function is running at. We can also use the Apply and call two global methods to change the specific point of this in the function.

• This in the global Code

Console.log (This = = = window); True to use this in global scope to point to the Window object

• Calls to normal functions

function f () {    this.name = "Jaychou";//This points to the Window object at run time, in strict mode it is undefined}

• Objects used in the

var obj1 = {    name: "Jaychou",    print:function () {        console.log (this.name);  This points to the object obj1, but can change its point to    }};

• As a constructor function

New F (); The This within the function points to the newly created object.

• Multi-layered nested intrinsic functions

var name = "Jay"; var person = {    Name: "JJ",    hello:function (a) {        var SayHello = function (a) {            Console.log (THIS.name + "says" + a);        };        SayHello (a);    }} Person.hello ("Hello World"),//jay says Hello World

A different way

var name = "Jay"; var person = {    Name: "JJ",    hello:function (a) {        var. = this;        var SayHello = function (a) {            Console.log (that.name + "says" + a);        };        SayHello (a);    }} Person.hello ("Hello World"),//JJ says Hello World

• This in the event

var ele = document.getElementById ("id"), Ele.addeventlistener (' click ', Function () {    console.log (this);  This points to the DOM element});

• Using Call and apply

Apply and call are similar, except that the arguments that follow are passed in through an array instead of being passed in separately. Both are used to bind a function to a specific object,
Naturally this will be explicitly set to the first parameter. Method definitions for both: Call (Thisarg [, ARG1,ARG2, ...]);  Parameter list, arg1,arg2,...apply (Thisarg [, Argarray]);     The parameter array, argarrayvar name = ' Global '; var o = {    name: ' Job ',    getname:function () {        console.log (this.name);    } };o.getname (); job//to change the point of this in the function with call or Apply O.getname.call (this); Global

Summary of this

    When a function is called as a method of an object, this points to the object.    when the function is called as a fade function, this pointer to the global object (when strict mode is undefined) in the constructor, the this point in the    newly created object    nested function does not inherit this from the upper function, if necessary, You can save this for the upper function with a variable.

JavaScript OOP classes and objects