I. Object Description

All variables in JavaScript can be used as objects (with properties and methods), with two exceptions null and undefined.

The literal value of a number can also be used as an object.

A mistake in the JavaScript parser is easy to confuse, trying to parse the point operator into part of a floating-point literal value.

2.toString(); // Error: SyntaxError

There are many ways to make literal values of numbers look like objects.

2..toString(); // The second dot can be resolved normally
2 .toString(); // Pay attention to the space in front of the dot
(2).toString(); // 2 is calculated first

Two. Prototype

2.1 Class-based Objects

1. definition class

2. Constructor of instance class

3. Instantiating objects

2.2 Prototype-based Objects

The main idea of prototyping is that there is now a class A, and I want to create a class B, which is prototyped by A and can be extended. We call the prototype of B A.

1. Defining prototype objects

2. Define the constructor of the object

3. Relating constructed functions to prototypes

4. Instantiating objects

var proto = {
    sentence : 4,
    probation : 2
};

var Prisoner = function(name,id){
    this.name = name;
    this.id = id;
};

Prisoner.prototype  = proto;

var first = new Prisoner('joe',12);

var second = new Prisoner('sam',20);

alert(first.a);
alert(first.name);
alert(second.probation);
alert(second.id);

2.3.prototype

Classes in 2.3.1 js

js grammar itself does not involve the concept of "class", but we can achieve the effect of "class" manually.

function People(name)
{
  this.name=name;
  this.Introduce=function(){
    alert("My name is "+this.name);
  }
}
People.Run=function(){
  alert("I can run");
}
People.prototype.IntroduceChinese=function(){
  alert("My name is"+this.name);
}

People can be seen as a "class" in the above code. When calling these methods, the following calls are required:

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese(); 

Introduce can be seen as a common "object method"

Run can be seen as a "static method"

Introduce Chinese can be seen as a "prototype approach"

In fact, all the methods in javascript fall into these three categories.

        var obj = {
            a:1,
            b:2
        }
        var fun = function (a,b) {
            this.a = a;
            this.b = b;
        }
        obj2 = new fun(1,2);

If fun is regarded as a "class", obj2 is actually equivalent to obj, so javascript ordinary objects can actually be seen as objects that have been instantiated.

We can implement class inheritance through prototype, which we will explain below.

2.3.2 Basic usage of prototype

Every function object in javascript (which can be seen as a class) has a prototype attribute, and the interpretation of the prototype attribute is a reference to the prototype of the return object type.

A.prototype = new B();

A prototype is an example of B. It is understandable that A clones all the methods and attributes in B. A can use B's methods and attributes. The emphasis here is on cloning rather than inheritance. But after executing the code, A can use B's attributes to implement the method, which in fact implements inheritance.

For example, in the example above, we first define the proto object, and then define the Prisoner object. We intend to clone the Prisoner class using proto as the prototype and also include the properties of proto.

We can also think of Prisoner as a proto construction method.

Three. Attributes

3.1 Object Attribute Finding Principle

Look at the following example

function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");   
    }
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg();//Display extendClass::showMsg

Is the method of extendClass itself the same name as the method in its prototype object?

It can be seen from this example that when a js object uses an attribute or method, it will first search from its own attributes or methods, then go to prototype (prototype object) if it cannot find it, and then go to prototype of the prototype of the prototype object, until it reaches the top, that is, Object.prototype - but it still does not find the specified attributes, it will return undefined.

This is what we often call the prototype chain.

We can see the shadow of "class inheritance" at every level in the prototype chain.

3.2 Object Attribute Deletion

The only way to delete attributes is to use the delete operator.

Setting an attribute to undefined or null does not really delete the attribute, but simply removes the association between the attribute and the value.

var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

Four. Inheritance

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// Set Bar's prototype attribute to Foo's instance object
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// Modify Bar.prototype.constructor to Bar itself
Bar.prototype.constructor = Bar;

var test = new Bar() // Create a new instance of Bar

// Prototype chain
test [Bar Example]
    Bar.prototype [Foo Example] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

In the example above, the test object inherits from Bar.prototype and Foo.prototype; therefore, it can access the prototype method of Foo. At the same time, it can also access the Foo instance attribute value defined on the prototype. It should be noted that new Bar() does not create a new Foo instance, but reuses the instance on its prototype; therefore, all Bar instances share the same value attribute.

5. hasOwnProperty Method

The hasOwnProperty function filters attributes on the prototype chain to obtain attributes on its own objects.

// Modify Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

This is recommended when we use for in to traverse objects:

for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);
    }
}

Prototype, a widely used class library, extends native JavaScript objects. Therefore, when this class library is included in the page, the for-in loop without hasOwnProperty filtering inevitably goes wrong.