JavaScript OOP classes and objects

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.