JavaScript Learning note 2_ Object-oriented

1. Definition of objects

In ECMAScript, an object is an unordered set of properties, where the "property" can be a base value, an object, or a function

2. Data properties and accessor properties

• Data properties are properties that have values, can be set property read-only, non-deleted, non-enumerable, and so on

• Accessor properties are used to set the getter and setter, with a "_" (underscore) in front of the property name to indicate that the property can only be accessed through accessors (private property), but not to add an underscore to the property to become private, which is only a customary convention of naming way. Accessor properties are useless for the following reasons:

  + View Code

  The above example code is used in the elevation, the principle is that _year is a data property in the book object's properties, and year is an accessor property, and it sounds good to use gettter and setter to insert read-write control.

  The problem is that both _year and edition are enumerable, that is, you can see with the for...in loop, and the accessor attribute year is not enumerable. The accessors that should be exposed are not public, but the private properties that should be hidden are exposed.

  In addition, this way of defining accessors is not fully browser compatible, [ie9+] is fully supported, and of course, there are ways to use the old browser (__definegetter__ () and __definesetter__ ()), or rather cumbersome.

  In summary, accessor properties are useless.

3. Constructors

function Fun () {} var = new fun (), where fun is a constructor, unlike a normal function without any way of declaring it, it's just a different invocation (called with the new operator).

Constructors can be used to define custom types, such as:

+ View Code

There are some similarities to the class declarations in Java, but there are some differences, such as that This.fun is just a function pointer, so it's entirely possible to point to other accessible functions such as global functions, but doing so can break the encapsulation of custom objects

4. Function and prototype prototype

2. Declaring a function also creates a prototype object with the function name holding a reference to the prototype object (Fun.prototype)

4. You can add properties to a prototype object, or you can add properties to an instance object, except that the properties of the prototype object are shared by all instances of that type, and the properties of the instance object are unshared

6. When a property of an instance object is accessed, it is looked up in the scope of the instance object, not found in the scope of the prototype object, so that the properties of the instance can mask properties with the same name as the prototype object

8. The constructor property of the prototype object is a function pointer, pointing to the function declaration

10. By prototyping, you can add custom methods to native reference types (object,array,string, etc.), such as adding a startswith method that Chrome does not support but FF supports:

    + View Code

    Note: It is not recommended to add a prototype attribute to the native object, because this may accidentally override the native method, affecting other native code (the native code that called the method)

12. Through the prototype can be implemented, the idea is to let the subclass of the prototype attribute to the parent class instance, to increase the child class accessible properties, so after connecting with the prototype chain

    12345

    子类可访问的属性= 子类实例属性 + 子类原型属性= 子类实例属性 + 父类实例属性 + 父类原型属性= 子类实例属性 + 父类实例属性 + 父父类实例属性 + 父父类原型属性= ...

    Eventually the parent ... The parent class prototype property is replaced with the property of the prototype object that Object.prototype points to

    The implementation is Subtype.prototype = new supertype (), which can be referred to as the inheritance of simple prototype chain mode

5. The best way to create a custom type (constructor mode + prototype mode)

The instance properties are declared with a constructor, and the shared properties are declared with a prototype, which is implemented as follows:

12345678910

functionMyObject(){  //实例属性  this.attr = value;  this.arr = [value1, value2...];}MyObject.prototype = {  constructor: MyObject,//保证子类持有正确的构造器引用，否则子类实例的constructor将指向Object的构造器，因为我们把原型改成匿名对象了  //共享属性  fun: function(){...}}

6. The best way to implement inheritance (parasitic combined inheritance)

12345678910111213141516

functionobject(obj){//返回原型为obj的没有实例属性的对象  functionFun(){}  Fun.prototype = obj;  returnnewFun();}functioninheritPrototype(subType, superType){  varprototype = object(superType.prototype);//建立原型链，继承父类原型属性，用自定义函数object处理是为了避免作为子类原型的父类实例具有实例属性，简单地说，就是为了切掉除多余的实例属性，可以对比组合继承理解  prototype.constructor = subType;//保证构造器正确，原型链会改变子类持有的构造器引用，建立原型链后应该再改回来  subType.prototype = prototype;}functionSubType(arg1, arg2...){  SuperType.call(this, arg1, arg2...);//继承父类实例属性  this.attr = value;//子类实例属性}inheritPrototype(SubType, SuperType);

Specific explanations are shown in code annotations, which avoids subtype.prototype = new supertype (); The disadvantages of simple prototype chains:

• The subclass instance shares the problem of the reference property of the parent class instance (since the prototype reference property is shared by all instances, the instance property of the prototype chain stepfather class is naturally the prototype attribute of the subclass).

• Unable to pass argument to parent class constructor when creating child class instance

7. The most common way to implement inheritance (combination inheritance)

Replace the above Inheritprototype (subtype, supertype) with the following statements:

12	SubType.prototype = newSuperType();SubType.prototype.constructor = SubType;

The disadvantage of this approach is that there is a redundant instance of the parent class attribute due to the invocation of a 2-time constructor of the parent class, for the following reasons:

First Supertype.call (this); The statement copies a copy of the parent class instance property from the parent class to the subclass as the instance property of the subclass, the second subtype.prototype = new Supertype (), and the parent class instance as the subclass prototype. At this point, the parent instance has another instance attribute, but this one will be masked out by the instance properties of the first copy, so superfluous.

JavaScript Learning note 2_ Object-oriented