Javascript object-oriented--method

Object-oriented JavaScript is a relatively popular concept in recent years. Due to my limited talent and limited knowledge, although I have done many web projects and read a lot of esoteric materials and tutorials on the Internet, I still have little understanding of their esoteric theories. I read it some time ago. After reading some books, I finally have my own understanding. Today I am going to pretend for a while. If you think it is very profound, please despise me directly. If you think it is wrong, please just criticize me.

First understand the following things in a general way.

Writing function fn(){} or var fn=function(){}, etc. in JS code, you can understand it as an object, of course, an array, etc.

Before understanding object-oriented, let’s first understand the following things.

1. Calling object methods

The function written in the outermost layer of js can also be understood as a method of the window object. The defined variable can also be called a property of the window object. For example:

var test=function(){
alert("123")
}
当然上面的你也可以这样定义
function test(){
alert("123")
}

As a method of the window object, we can call it like this

test()//Pop up the warning box 123 (because the window object is a top-level object, we can omit it)
window .test()//The warning box 123 pops up
window['test']()//The warning box 123 pops up. Test can be understood as a method value under the window array object.

Through the above examples, we have a general understanding of how to use and call object methods.

2, Private methods

Private methods are methods that can only be used within the scope of the object. This can be understood in terms of variable scope.
The functions in the above examples can be understood as private methods of the window object. Continue with the example below.

var pet=function(){
 function showpet(){
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
 var temp="私有变量只有在函数或者对象作用域范围内能访问"
}
showpet();//会出错
pet.showpet()//还是不能这样调用
var Penguin=new pet() //实例化一个pet对象
Penguin.showpet()//不好意思这样子还是不能让你调用。

What should I do if the method I want to define can be called outside the scope of the object? How can I use private methods? Let’s look at the next bit.

3. Static method

With the above questions, let’s continue the above example.

var pet=function(){
 function showpet(){//私有方法
 alert("123")
 }
 showpet();//私有方法可以在函数作用域范围内使用。
}
pet.show=function(){//给pet对象添加一个静态方法。
alert("456")
}
pet.name="Penguin"//给pet对象添加一个静态属性。
pet.show()//弹出警告框456
alert(pet.name)//弹出警告框Penguin
//继续思维碰撞
=====================
var Penguin=new pet() //实例化一个pet对象
Penguin.show()//不好意思,这个静态方法好像没有被实例继承。有这种思路值得表扬啊，加油！

The above example shows you what a static method is. Of course, you may not understand it. In fact, I don’t understand it either, because I am also a novice, but as long as you read it, you will know how to write a static method for an object. Method, just how to call the static method. Maybe one day, you will suddenly understand and come back to teach me. With the above questions, let's take a look at the methods that can be called by instantiated objects.

4. Public methods

Public methods are usually implemented by modifying the prototype of the constructor. After modifying the prototype of an object, all instances of the object will inherit the modification of the prototype (this sentence Extremely pretentious, please ignore it if you feel vague).

Modify the object prototype method and continue the above example.

pet.prototype.setname=function(str){//通过修改原型添加一个公有方法，用于添加修改实例对象的name
name=str;
}

Look at the example:

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){ //如果这里不理解，请注意这个方法下面就要介绍了。
 showname();
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet()
 Penguin.setname("Penguin");//添加实例的name值为Penguin
 Penguin.show();   //弹出Penguin
 Penguin.setname("wind");//添加实例的name值为wind
 Penguin.show();   //弹出wind

Run the code and have fun.

<script>
var pet=function(){
 name:"123",
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){
 showname();
 }
 }
pet.prototype.setname=function(str){
 name=str;
}
 var Penguin=new pet()
 Penguin.setname("Penguin");
Penguin.show();
Penguin.setname("wind");
Penguin.show();
</script>

5. Privileged method (object or function external interface)

In fact, we have already used this method in the above example. This method can be called by instantiated object inheritance. By defining the method via the thsi keyword inside the constructor. Privileged methods can be publicly accessed outside the constructor (limited to instantiated objects), and can also access private members and methods, so they are most suitable as interfaces for objects or constructors. Through privileged functions we can control public Method access to private methods, which has many applications in JS framework extensions.

Readers can think that the above is a paragraph of P. Let’s take a look at how to define a privileged method, how to reference a privileged method, and continue to call the above examples to see.

var pet=function(){
 function showname(){//私有方法
 alert(this.name)
 }
 this.show=function(){//通过使用this关键字定义一个特权方法。
 showname();  //在特权方法中访问私有方法；
 }
}
pet.prototype.setname=function(str){
name=str;
}
var Penguin=new pet();//实例化一个pet对象
 Penguin.setname("Penguin");//调用公有方法修改
 Penguin.show();   //调用特权方法访问私有方法，弹出name

First create a privileged method by using this.fn=function(){} in the constructor. Access private methods in privileged functions;

The instantiated object can use some private methods by accessing privileged functions. The method of accessing privileged functions is the same as accessing public functions.

The first part is here for the time being. The next part will use an example to explain how to install B in the object-oriented way.

The above is the entire content of this article. I hope it will be helpful to everyone. Friends who are interested can read "Javascript Object-Oriented--Encapsulation". Thank you for your support to the PHP Chinese website!