Home  >  Article  >  Web Front-end  >  Detailed explanation of JavaScript object creation, function encapsulation, and attribute code examples

Detailed explanation of JavaScript object creation, function encapsulation, and attribute code examples

伊谢尔伦
伊谢尔伦Original
2017-07-24 14:57:321957browse

Create objects

First of all, let’s understand object-oriented programming (Object-Oriented Programming, OOP). When using OOP technology, we often need to use a lot of Code modules, each module provides specific functions, each module is isolated, or even completely independent from other modules. This modular programming approach provides great diversity and greatly increases opportunities for code reuse. To further illustrate this problem, consider a high-performance application on your computer that is a first-class racing car. Using traditional programming techniques, the car would be a unit. If you want to improve the car, you have to replace the entire unit, send it back to the manufacturer, have an automotive expert upgrade it, or buy a new car. If you use OOP technology, you only need to buy a new engine from the manufacturer and replace it yourself according to the instructions, instead of cutting the car body with a hacksaw. However, most of the arguments are that JavaScript is not a direct object-oriented language, but through simulation it can do many things that only object-oriented languages ​​can do, such as inheritance, polymorphism, and encapsulation. JavaScript can do it (there is nothing it cannot do, Just can’t think of it)

//以下三种构造对象的方法 
//new Object,实例化一个Object 
var a=new Object(); 
a.x=1,a.y=2; 
//对象直接量 
var b={x:1,y:2}; 
//定义类型 
function Point(x,y){ //类似于C#中的类 
this.x=x; 
this.y=y; 
} 
var p=new Point(1,2); //实例化类

The first method is achieved by constructing a basic object and directly adding attributes. The second method is similar to the first method and can be regarded as a shortcut representation of the first method. The third method is In the method, you can create multiple objects of the same type based on "class"

Encapsulation of object attributes (public and private)
Illustrated with examples
function List(){
var m_elements=[]; //Private members cannot be accessed outside the object. If there is no var declaration here, m_elements will become a global variable, so that the outside can be directly accessed, such as alert (m_elements[0])

m_elements=Array.apply(m_elements,arguments); 
//此处模拟getter,使用时alist.length; 
//等价于getName()方式:this.length=function(){return m_elements.length;},使用时 
alist.length(); 
//公有属性,可以通过"."运算符或下标来访问 
this.length={ 
valueOf:function(){ 
return m_elements.length; 
}, 
toString:function(){ 
return m_elements.length; 
} 
} 
//公有方法,此方法使用得alert(alist)相当于alert(alist.toString()) 
this.toString=function(){ 
return m_elements.toString(); 
} 
//公有方法 
this.add=function(){ 
m_elements.push.apply(m_elements,arguments); 
} 
//私有方法如下形式,这里涉及到了闭包的概念,接下来继续说明 
//var add=function()或function add() 
//{ 
//m_elements.push.apply(m_elements,arguments); 
//} 
} 
var alist=new List(1,2,3); 
dwn(alist); //=alert(alist.toString()),输出1,2,3 
dwn(alist.length); //输出3 
alist.add(4,5,6); 
dwn(alist); //输出1,2,3,4,5,6 
dwn(alist.length); //输出6

Types of properties and methods
In JavaScript, object properties and methods support 4 different types: private property (private property), dynamic publicproperty (dynamic public property), static public property/prototype property (static public property or prototype property), static property (static property or class property). Private properties are completely inaccessible to the outside world and can be accessed through internal getters and setters (both simulations); dynamic public properties can be accessed by the outside world, and each object instance holds a copy and will not affect each other; prototype properties of each object instance A unique copy is shared; class attributes are not treated as attributes of the instance, only as attributes of the class.
The following are examples:

//动态公有类型,静态公有类型(原型属性) 
function myClass(){ 
var p=100; //private property 
this.x=10; //dynamic public property 
} 
myClass.prototype.y=20; //static public property or prototype property,动态为myClass的原型添 
加了属性,将作用于所有实例化了的对象,注意这里用到了prototype,这是一个非常有用的东东 
//要想成为高级javascript阶段,prototype和闭包必须得理解和适当应用 
myClass.z=30; //static property 
var a=new myClass(); 
dwn(a.p) //undefined 
dwn(a.x) //10 
dwn(a.y) //20 
a.x=20; 
a.y=40; 
dwn(a.x); //20 
dwn(a.y); //40 
delete(a.x); //删除对象a的属性x 
delete(a.y); //删除对象a的属性y 
dwn(a.x); //undefined 
dwn(a.y); //20 静态公有属性y被删除后还原为原型属性y 
dwn(a.z); //undefined 类属性无法通过对象访问 
dwn(myClass.z);

The above is the detailed content of Detailed explanation of JavaScript object creation, function encapsulation, and attribute code examples. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn