JavaScript Object-oriented article

1 The concept of an expression

• Generalized concept: All returned chunks of code can be expressions. For example:

  var a=0;var a, B;

• A = 0; the return value of this expression is 0;

• b = A; The return value of this expression is a;

• The return value of the assignment expression is = the value on the right;

2 Object-oriented concepts:

• A programming idea. Core: In solving any problem, first try to find an object to help solve the problem.

• Advantages:

1. Identity: Dispatcher;

2. The flexibility of the code is high;

3. High maintainability;

4. High scalability;

• Disadvantages:

1. may result in increased complexity of the code

2. Relatively poor readability

3 process oriented:

• Identity: Performer

• Order: The general situation can not be disrupted, from the top to the next step of execution.

4 features of the JavaScript language:

• Weak type

• Multi-paradigm

• Object-based language: In JS, everything is an object

• The language based on prototype

5 The concept of prototypes

所谓原型形就是一个函数的prototype属性所引用的对象

• As long as you declare a function, the prototype exists

  function foo () {};foo.prototype[' name ']= ' Ksir '; var f = new Foo (); Console.log (F.constructor = = = Foo.prototype.constructor);

• This prototype is shared by each object created by the function, meaning that all the objects created above can be accessed directly to any member (properties and methods) on the prototype;
  (The dynamic property of an object is that the object can be created with the same . or [] dynamic object);

6 the nature of the prototype

• The essence of the prototype is the object

function Person (name,age,gender) {    this.name = name;    This.age = age;    This.gender = gender;    This.talk = function () {        console.log (' Hello ');}     } var Kangfeng = new Person (' Xiao Qiang ', 21, ' male '), var xiaoming = new Perso N (' xiaoming ', 20, ' female '); var xiaohong = new Person (' Little Red ', ' 19 ', ' Female '); Kangfeng.talk (); Xiaoming.talk (); Xiaohong.talk (); Thinking: Are the three children's talk methods the same? Console.log (Xiaoming.talk = = = Kangfeng.talk); Console.log (Xiaohong.talk = = = Xiaohong.talk)://The methods of these three objects are different, independent of each other Person.prototype.addfu () {    Console.log (' Add a function to the prototype ');}

• When the same logical code exists in the constructor, and then the object is created, the code logic in the function is copied, the method within the constructor is extracted and placed in a common place, and the public place is accessible to all objects created by the constructor-all the objects of the constructor can share the prototype of the constructor function.

• Benefits: Data sharing for homogeneous objects

7 How to get a prototype

• by function:

<fnName>.prototype;

• By object:

object.__proto__;//Two underline

8 part of an object

对象本身;他的原型

• Each object has __proto__ properties, which means that each object has a prototype

• Math.__proto__===object.prototype;

• The type of the object is the name of the constructor

9 prototype Properties & prototype Objects

• Prototype properties: From the point of view of the function, the prototype can be called the prototype property of the function

• Prototype object: The object's angle, the prototype can be called the object's prototype object

Ten __proto__ double underline standard

__proto__ This double underline standard is not the standard, these properties are non-standard properties.

There is a compatibility issue. If we can't get the prototype property by double underscore, we have to get it through a function.

function Getprototype (obj) {    //determines if the browser is compatible with __proto__ properties    //return!! Obj.__proto__? Obj.__proto__:obj.constructor.prototype;    if (obj.__proto__) {    //support        return obj.__proto__;    } else{        //Gets the constructor of the object        //Gets its prototype object from the prototype property of this function        return obj.constructor.prototype;}    } function A () {};var a = a (); Console.log (Getprototype (a). constructor);//If we have an if else return structure in our function, we can use the 3-tuple operator to optimize it.

One How standard constructors are written

Which properties are to be saved inside the constructor, which properties need to be extracted and placed on the prototype function B (name) {}; B.prototype.name = ' Tom '; var tom = new B;console.log (tom.name); var jim = new Jim;console.log (jim.name);//results are tom// So it's called private properties that are related to a particular object, and the Write property must be written in the constructor, and those shared attributes (the properties that each object has, do not change with the object, for example, some methods (the behavior of the object)-public properties) can be defined in the prototype attribute.//Generally, Constructor of the method put on the prototype//Do not advocate on the JS native object extension member//disadvantage, will cause the native object is too large, cumbersome, affecting performance

A watch out.

• Adding a method to a constructor is generally added to the prototype, and for convenience, the method is generally added to the < constructor name >.prototype{} in the form of an object, and do not forget to add the constructor: 构造函数名 key-value pair form.

- characteristics of the prototype

Dynamic nature:

• To the prototype extension member will directly react to the created object body

• Replacing a prototype object does not reflect the object that was created, but it directly affects the object created after it

Uniqueness

• All objects created by the same function, sharing the same prototype object

Non-denaturing:

• Object is unable to change any members on the prototype object

Inheritance:

• All objects inherit from its prototype object

Article Source: Web front-end development video Course http://www.qianduanshiping.com

JavaScript Object-oriented article