The high-order function of JavaScript advanced technique in "the road of the front" (bottom)

Directory

• Chapter II-03: Advanced Functions of advanced advanced techniques
  • First, anti-tampering objects
    • 1-1:configurable and writable
    • 1-2:enumerable
    • 1-3:get, set
    • 2-1: Non-expandable objects
    • 2-2: Sealed Object
    • 2-3: Frozen objects
  • Ii. Custom Events

Chapter II-03: Advanced Function of advanced advanced technique I. Anti-tampering Object

The nature of JavaScript sharing has always been a pain in the minds of developers, because any object can be modified by code that runs in the same environment.

ECMASCRIPT5 is committed to solving this problem, allowing developers to define 防篡改对象 (Tamper-proof object). It's the principle that

By setting the default properties of each object's properties:

• [[configurable]]---configurable
• [[writable]]---can be re-assigned
• [[Enumerable]]---can be enumerated
• [[Value]]---default value
• [[Get]]
  
• [[Set]]

1-1:configurable and writable

Let's take a look at each of these attributes:

// Demo onevar o = {}Object.defineProperty(o, 'name', {    value: 'zhang',    configurable: false})console.log(o)Object.defineProperty(o, 'name', {    writable: false})o.name = 'Li'console.log(o)  // {name: 'zhange'}  属性未被改变

In the above demo we will set the configurable property to False, and then compare the following demo to see the role of configurable properties

// Demo twovar o = {}Object.defineProperty(o, 'name', {    value: 'zhang',    configurable: false})console.log(o)Object.defineProperty(o, 'name', {    writable: true})o.name = 'Li' // Uncaught TypeError: Cannot redefine property: name 报错

Summary: When [[configurable]] is fasle [[[writable]] default has been set to False, if you want to modify [[writable]]
The error will be. Then we can understand that when [[configurable]] is false, [[writable]] is only false.

1-2:enumerable

We still use Demo to explain the contrast:

var o = {}Object.defineProperty(o, 'age', {    enumerable: true,    value: 18})for(item in o) {    console.log(item, o[item])   // age 18}

Set enumerable to False

var o = {}Object.defineProperty(o, 'age', {    enumerable: false,    value: 19})for(item in o) {    console.log(item, o[item])   // undefined}

1-3:get, set

Get and set the twins we have said many times. This time, let's take a closer look at this.

var o = {}var v = 'coder'Object.defineProperty(o, 'job', {    get: function() {        console.log('get:', v)        return v    },    set: function(newV) {        console.log('set:', newV)        v = newV    }})o.job = 'xxx'   // set: xxx// 很奇怪的一点就是 当我们在 浏览器控制台点开 o 对象的时候，再次去点击 job 属性，就会触发 get 方法。

2-1: Non-expandable objects

Object.preventextensions (o)
Can make it impossible to add properties and methods to objects

var o = {name: 'zhang'}Object.preventExtensions(o)o.age = '12'console.log(o)      // {name: 'zhang'}// 已经阻止了给对象添加属性和方法了。再去添加 也未能添加上

Object.isextensible (o)
Determines whether an object can be extended

var o = {name: 'zhang'}var res1 = Object.isExtensible(o)Object.preventExtensions(o)var res2 = Object.isExtensible(o)console.log(res1, res2)     // true false

2-2: Sealed Object

Object.seal (o)
Sealed objects are not extensible, and the [[configurable]] attribute of an existing member is set to false, which means that properties and methods cannot be deleted. Cannot be added, cannot be deleted.

var o = {name: 'Li'}Object.isSealed(o)  // falseObject.seal(o)Object.isSealed(o)  // true

Object.issealed (o)
The test is sealed ()

2-3: Frozen objects

Object.freeze (o)

The most stringent anti-tamper level is the frozen object (frozen objects). Frozen objects cannot be extended, are sealed, and the [[writable]] attribute of the object property is set to False.

If the [[Set]] function is defined, the accessor property is still writable.

var obj = {age: 123}Object.freeze(obj)Object.isFrozen(obj)            // trueObject.isSealed(obj)            // trueObject.isExtensible(obj)        // false

Object.isfrozen (o)

Check whether it is frozen

Ii. Custom Events

Based on 观察者模式 a technique for creating loosely coupled code. Use custom events to help decouple related objects and keep functionality isolated.

 function Eventtarget () {this.handlers = {};} Eventtarget.prototype = {constructor:eventtraget, addhandler:function (Type,handler) {if (typeof This.hand Lers[type] = = = ' undefined ') {this.handlers[type] = []; } this.handlers[type].push (handler); }, Fire:function (event) {if (!event.target) {event.target = this; } if (This.handlers[type] instanceof Array) {var handlers = This.handlers[event.type]; for (var i = 0,len = Handlers.length; i < Len; i++) {Handlers[i] (event);//execute callback function}} }, Removehandler:function (Type,handler) {if (This.handlers[type] instanceof Array) {var handlers = This.handlers[type]; for (var i = 0,len = Handlers.length; i < Len; i++) {if (handlers[i] = = = Handler) {Brea K }} handlers.splice (i,1);//Delete}}} 

Summary: The above is the application of some of the relevant scenarios in higher-order functions, but this is only a basic part, the actual use of the scene also needs to be handled flexibly.
Well, this blog will be written in this issue first.

GitHub Address: (Welcome star, welcome recommendation:)

Higher order function of the advanced technique of the front end (bottom)