Javascript object-oriented article (1)

1 The concept of expression

Broad concept: All returned code blocks can become expressions. For example:

var a=0;var a, b;
a = 0;这个表达式的返回值为0;
b = a;这个表达式的返回值为a;

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

2 Object-oriented concept:

A programming idea. Core: When solving any problem, first try to find an object Help solve problems.

Advantages:

Identity: Scheduler;

High code flexibility;

High maintainability;

High scalability;

Disadvantages:

It may cause the complexity of the code to increase

The readability is relatively poor

3 Process-oriented:

Identity: Executor

Sequence: Under normal circumstances, it cannot be disrupted, and is executed step by step from top to next .

4 Characteristics of Javascript language:

Weak type

Multi-paradigm

Object-based language: In js, everything is an object

Prototype-based language

5 The concept of prototype

The so-called prototype is the prototype of a function The object referenced by the attribute

As long as a function is declared, the prototype exists

function foo(){};
foo.prototype['name']='ksir';
var f = new foo();
console.log(f.constructor ===foo.prototype.constructor);

When every object created through the function shares this prototype, that is to say, the prototype created above All objects can directly access any members (properties and methods) on the prototype;
(The dynamic characteristic of objects is that objects can be created dynamically with . or []);

6 The essence of prototype

The essence of 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('小强',21,'男');
 var xiaoming = new Person('小明',20,'女');
 var xiaohong = new Person('小红','19','女');
 kangfeng.talk();
 xiaoming.talk();
 xiaohong.talk();
 //思考:这三个儿女的talk方法是否一样?
 console.log(xiaoming.talk === kangfeng.talk);
 console.log(xiaohong.talk === xiaohong.talk):
 //这三个对象的方法是不一样,相互独立的
 Person.prototype.addfu(){
    console.log('给原型添加一个函数');
}

The same logic code exists in the constructor, and then when the object is created, the function will be copied The code logic is to extract the methods in the constructor and put them in a public place. This public place can be accessed by the objects created by the constructor - all objects of the constructor can share the prototype of the constructor.

Advantages: realize data sharing of similar objects

7 Method of obtaining prototype

Through function:

<fnName>.prototype;

Through object:

object.__proto__;
//两个下划线

8 The components of the object

The object itself; its prototype

Every object has the __proto__ attribute, which means that every object has There is 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 perspective of a function, the prototype can be called the prototype attribute of the function

Prototype object: From the perspective of the object, the prototype can be called the prototype object of the object

10 __proto__Double underline standard

__proto__This double underline standard is not a w3c standard, and these attributes are non-standard attributes.

There are compatibility issues. If we cannot get the prototype attribute through double underscores, we have to get it through the function

function getPrototype(obj){
    //判断浏览器是否兼容__proto__属性
    //return !!obj.__proto__? obj.__proto__:obj.constructor.prototype;
    if(obj.__proto__){
    //支持
        return obj.__proto__;
    }else{
        //获取该对象的构造函数
        //在通过此函数的prototype属性获取其原型对象
        return obj.constructor.prototype;
    }
}
function A(){};
var a = A();
console.log(getPrototype(a).constructor);
//如果我们的函数中有if else return结构,我们可以用3元运算符来优化.

11 How to write the standard constructor //Which attributes should be saved in Inside the constructor, which attributes 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);
//结果都是tom
//所以和具体某个对象息息相关的称为私有属性,这写属性都必须写在构造函数内,那些共享的属性(每个对象都具有的属性,不会随对象变化而变化,
比如说一些方法(对象的行为)--公有属性)就可以定义在原型属性中.
//一般情况下,构造函数的方法放原型上
//不提倡在js原生对象上进行扩展成员
//坏处,会导致原生对象过于庞大,累赘,影响性能

12 Notes

Add methods to the constructor It is generally added to the prototype. For convenience, the method is generally added to .prototype{} in the form of an object. At the same time, don’t forget to add constructor: constructor name in the form of key-value pairs.

13 Characteristics of the prototype

Dynamicity:

Extending members to the prototype will directly reflect the created object

Replacing the prototype object will not reflect the created object, but it will directly affect the objects created later

Uniqueness

All objects created by the same function Objects, share the same prototype object

Immutability:

Object cannot change any member on the prototype object

Inheritance:

All objects are The prototype object inherited from it

The above is the content of the Javascript object-oriented article (1). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!