Home > Web Front-end > JS Tutorial > body text

Implementation and use of js constructors, index arrays and attributes_javascript skills

WBOY
Release: 2016-05-16 16:31:13
Original
1767 people have browsed it
<script>
function p(){
 var len=arguments.length;
 for(var i=0;i<len;i++){
  document.write(arguments[i]+"<br/>");
 }
 
}
function Myclass(x,y){
 this.x=x;
 this.y=y;
 this.show=function(){
  return this.x+this.y;
 }
}
var m1=new Myclass(1,2);
var m2=new Myclass(3,4);
p(m1.show(),m2.show());
</script>
Copy after login

Existing problems
1. Since all instances copy entities defined by the same method, efficiency (low memory efficiency and low execution efficiency) can be solved through prototype inheritance
2. The inability to control access to attribute values ​​(private, public) can be solved by closure
The operand of attribute access is not a variable but a reference to the object
Processing of reading only the integer part of a value
Math[this<0?'celling':'floor'](this);

Associative array
Associative arrays must be implemented through objects in js
Basic operations: getting values ​​through keys, setting elements, deleting elements

<script>
var map={x:3,y:4};
p(map.x);
delete map.x; //true
p(map.x); //undefined 对不存在的元素进行访问结果是undefined ,由于可以显示地将值设置为undefined ,因此无法通过将值与undefined比较来判断值是否存在 ,可以通过for in进行枚举
a='undefined';
p(a);//undefined
p(typeof map.x==a); //true
</script>
Copy after login

Points that should be noted as an associative array

<script>
function Myclass(x,y){
 this.x=x;
 this.y=y;
}
Myclass.prototype.z=5;
var obj=new Myclass(1,2);
for(var key in obj){
 p(key+":"+obj[key]); //会枚举出通过原型继承来的属性
}
//x:1 y:2 z:5
delete obj.x;//true
p(obj.x); //undefined
p(obj.z); //5
//通过原型继承来的属性 无法被delete删除
delete obj.z; //true
p(obj.z);//5
//在将对象作为关联数组使用时,通常都会使用字面量来创建,即使视图通过使用空的对象字面量来创建一个没有元素的关联数组,也仍会从Object类中继承原型的属性
p('toString' in obj); //true
var obj1={};
p('toString' in obj1);//true
//通过 for in枚举
p(obj1.length); //undefined
for(var k in obj1){
 p(obj1[k]);
}
//没有元素 被枚举出来 这是由于enumerable属性的缘故
//通过hasOwnProperty来判断 是本身的属性还是通过 参与原型继承而来的属性
var map={};
p(map.hasOwnProperty('toString')); //false
map['toString']=1;
p(map.hasOwnProperty('toString')); //true
delete map['toString'] ;
p(map.hasOwnProperty('toString'));//false
</script>
Copy after login

Properties of properties

The properties of objects also have some properties
The following table summarizes the attributes defined in ECMAScript 5th Edition. The attribute value is designated as the value attribute
Form 1

Immutable Object That is, an object whose state cannot be changed after it is generated. String objects are typical immutable objects Flexible use of immutable objects can improve the robustness of the program. For example, when passing to method parameters, there is a method that rewrites the object content, etc. Immutable objects can be implemented in js in the following ways 1. Hide attributes (status) and do not provide change operations (closure implementation) 2. Flexibly use the functions provided by ECMAScript fifth edition 3. Flexibly use writable, configurable attributes, setters and getters Functions used to support object immutability in ECMAScript 5th Edition See the table below

属性的属性名

含义

writable

可以改写属性的值

enumerable

可以通过for in枚举出

configurable

可以改变属性的属性,可以删除属性

get

可以指定属性值的getter函数

set

可以指定属性值的setter函数

Attribute name of the attribute

Meaning


writable

You can overwrite the value of the attribute

enumerable

can be enumerated through for in

configurable

方法名

属性新增

属性删除

属性值变更

确认方法

preventExtensions

x

o

o

Object.isExtensible

seal

x

x

o

Object.isSealed

freeze

x

x

x

Object.isFrozen

You can change the attributes of attributes and you can delete attributes

get

Getter function that can specify attribute value
<script>
var obj={x:2,y:3};
Object.preventExtensions(obj);
//无法新增属性
obj.z=4;
p(Object.keys(obj));//x,y
//可以删除属性
delete obj.y;
p(Object.keys(obj)); //x
//可以更改属性值
obj.x=20;
p(obj.x); //20

//Object.seal例子 将属性的configurable设置为假
var obj={x:2,y:3};
Object.seal(obj);
//无法新增 也无法删除
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x; //false
p(Object.keys(obj));//x,y
//可以改变 属性值
obj.x=20;
p(obj.x);//20



//Object.freeze例子 将属性的writable设置为假
var obj={x:2,y:3};
Object.freeze(obj);
//无法新增 也无法删除,也无法改变属性值
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x;
p(Object.keys(obj));//x,y
//可以改变 属性值
obj.x=20;
p(obj.x);//20
</script>
Copy after login
set


Setter function that can specify attribute values
Method name New attribute Attribute deletion Attribute value changes Confirmation method
preventExtensions x o o Object.isExtensible
seal x x o Object.isSealed
freeze x x x Object.isFrozen
Object.preventExtensions example Need to pay attention 1. Once the above three methods are changed, they cannot be restored 2. If you want the inherited method in prototypal inheritance to be unchangeable, you need to display it
Related labels:
source:php.cn
Statement of this Website
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template