Object-oriented JavaScript

Creating objects

1, Posture One

var person = new object();person.name = ‘jack‘person.age = 18;person.sayName = function(){    console.log(this.name);

2, Posture II (simple and convenient, recommended use)

var person = {    name: ‘jack‘,    age: 18,    sayName: function(){        console.log(this.name);    }}

constructor function

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(this.name);    }}var p1 = new Person(‘jack‘, 18);p1.sayName(); // jack

Relationship of constructors and instance objects

There is also a constructor property in each instance object that points to the constructor that created the instance

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(‘i am ‘ + this.name);    }};var p1 = new Person(‘alex‘, 18);var p2 = new Person(‘jason‘, 17);console.log(p1.constructor === Person); // trueconsole.log(p1.constructor === p2.constructor); //true

Detect object type, use instanceof more reliable

console.log(p1 instanceof Person); //trueconsole.log(p2 instanceof Person); //true

For each instance, the Sayname is exactly the same. Each time an instance is generated, it must be a duplicate of the content, occupy some memory, if the instance object is many, it will cause great memory waste.

var fns = {    sayName: function(){        console.log("i am" + this.name);    }}function Person(name, age){    this.name = name,    this.age = age,    this.sayName = fns.sayName}var p1 = new Person(‘alex‘, 18);p1.sayName();

The above method solves the problem of memory waste, but it seems to be not elegant, the ultimate solution prototype

Prototype

JAVASCRIPT specifies that each constructor has a prototype property that points to another object.

function F(){};console.log(F.prototype) // Object

The prototype object of the constructor has a constructor property by default, pointing to the function where the prototype object resides.

console.log(F.prototype.constructor === F) // => true

The instance object that is obtained through the constructor contains a pointer to the constructor's prototype object Proto.

var instance = new F()console.log(instance.__proto__ === F.prototype) // => true

This means that we can define the properties and methods that all object instances need to share directly on the prototype object.

function Person(name, age){    this.name = name    this.age = age}Person.prototype.type = ‘human‘;Person.prototype.sayName = function(){    console.log(this.name);}var p1 = new Person(‘alex‘, 18);var p2 = new Person(‘jack‘, 18);console.log(p1.sayName === p2.sayName); //true

Relationships between constructors, instances, and prototypes

Attention:

"Contructor" does not mean that (the object) is (it) constructed

P1.contructor only has no relationship with the person and the "construct" by default [[Prototype]] delegate. Person.prototype's. The Contructor property is only the default property when the person function is declared

function Person(name, age){    this.name = name,    this.age = age,    this.sayName = function(){        console.log(‘i am ‘ + this.name);    }};function Test(){    this.name = ‘test‘;}Person.prototype = {    constructor: Test}var p1 = new Person(‘alex‘, 18);console.log(p1.constructor === Person) // falseconsole.log(Person.prototype.constructor.name) // Test

A more elegant notation.

function Person(name, age){    this.name = name,    this.age = age    }Person.Prototype = {    contructor: Person,    // => 手动将 constructor 指向正确的构造函数 防止原型对象丢失    type: ‘human‘,    sayName: function(){        console.log("I am " + this.name);    }}

Object-oriented JavaScript