JavaScript Object-oriented

An object is actually a reference type. The value of the object is an instance of the reference type. A reference type is a data structure in JavaScript that organizes data and functionality together. It is also often called a class, but there is no class concept in JavaScript. Although JavaScript is an object-oriented language, it does not have the basic structure of classes and interfaces supported by traditional object-oriented languages.

object creation and common operations

1. Using the new operator

   var user = new Object();        //使用new运算符创建一个对象user.name = ‘编程浪子‘;        //给对象添加属性user.age = 22;user.address = ‘四川成都‘;  

2. Object literal (JSON mode)

   var user = {    name:‘编程浪子‘,    age:22,    address:‘四川成都‘    };  

3. Simple Way (Traditional assignment method)

   var user = {};user.name = ‘编程浪子‘;        //给对象添加属性user.age = 22;user.address = ‘四川成都‘;

4. The invocation of the property

There are two ways to call object properties:

The calling method is as follows:

alert(user.name + " " +user.age);//返回 ‘编程浪子 四川成都‘  

Another way:

    alert(user[‘name‘] + " " +user[‘age‘]);//返回 ‘编程浪子 四川成都‘    

5. Add a method

        var user = {        name:‘编程浪子‘,//给对象添加属性        age:22,        address:‘四川成都‘,        showInfo:function(){//添加一个方法        alert(this.name+" "+this.age+" "+this.address);        },        showHello:showHello//将对象外部的方法添加到对象        };        function showHello(){        alert("Hello!");        }        user.showInfo();//调用方法        user.showHello();  

Creating objects using the above method is simple and intuitive, and is the most basic way to create objects in JavaScript. But there is a problem, if we need to create multiple objects, then I have to write a lot of duplicate code. For example, we want to create another object user1, we have to re-write the above code again, which is not appropriate in the actual development process, so if the object is too large, the amount of code will be greatly increased.

To solve the appeal problem, we can use a method called Factory mode , which is to solve the problem that the instantiated object produces a lot of duplicate code.

Factory mode

function create(name,age) {　　var obj = new Object(); 　　obj.name = name; 　　obj.age = age;　　obj.show = function () {　　　　return this.name +‘ ‘+ this.age;　　};　　return obj;}var obj1= create(‘第一个实例‘, 30);    //第一个实例var obj2= create(‘第二个实例‘, 20);    //第二个实例alert(obj1.show());//第一个实例 30alert(obj2.show());//第二个实例 20  

As we can see from the appeal code, the factory model solves the problem of code duplication, but then there is a new problem-identifying the problem, we can't figure out exactly which object they are. As follows:

 function create(name,age) {        var obj = new Object();        obj.name = name;        obj.age = age;        obj.show = function () {            return this.name + ‘ ‘ + this.age;        };        return obj;    }    var obj1= create(‘第一个实例‘, 30);    //第一个实例    var obj2= create(‘第二个实例‘, 20);    //第二个实例    alert(typeof obj1);  //Object    alert(obj1 instanceof Object);  //true

The above code indicates that Obj1 is an object, but we cannot know which object was created.

Constructors (construction method)-Class (First letter capital)

function User(name, age) {//构造函数模式       this.name = name;       this.age = age;       this.show = function () {           return this.name  + ‘ ‘+this.age;       };   }创建对象的时候用new运算符就可以了:   var user1 = new User(‘bclz‘, 30);    //第一个实例   var user2 = new User(‘bcxb‘, 20);    //第二个实例检测user1或者user2是不是属于User   alert(user1 instanceof User);//true

Therefore, the method of using the constructor, that is to solve the problem of repeated instantiation , but also solve the problem of object recognition .

To create a new instance of the user object, use the new operator to build the instance object in this way, which takes the following 4 steps:

1. Create a new object;

2. Set the scope of the constructor to the new object (hence this new object that this is pointing to).

3. Execute the code within the constructor (add attributes to the new object);

4. Returns the new object.

Constructors are also functions

The only difference between a constructor and a function is that it is called differently, but after all, the constructor is also a function, and there is no special syntax for defining constructors. Any function, as long as it is called by the new operator, can be thought of as a constructor, and any function, if not called by the new operator, is no different from a normal function, such as the previously defined user:

//当作构造函数调用var user1 = new User(‘bclz‘, 30);  user1.show(); //bclz 30;//当作普通函数调用User(‘bclz‘, 30);window.show(); //bclz 30;  

As you can see, the pointer to the this object in the function is actually a pointer to the window global object, as the normal function calls. Called by the New keyword, this point is the

In fact, you can write it like this:

By using the function method call to redefine the scope of the object, here is not much to explain, when it comes to the details of the function of the method, it is only explained that can change the scope of the object, is actually to change the direction of this

JavaScript Object-oriented