js closure object

In order to facilitate use and prevent pollution of global variables, a series of functions can be encapsulated in a class

const CheckObj1 = function(){
    this.checkName = function(){
        console.log("checkName")
    }
    this.checkEmail = function(){
        console.log("checkEmail")
    }
    this.checkPassword = function(){
        console.log("checkPassword")
    }
}

However, in the above way, each time CheckObj is instantiated, the instance object will copy a method on this, which will cause redundant consumption. You can use the characteristics of the prototype chain to make all instance objects share a set of methods

In this way, all instance objects will use the methods in the prototype instead of creating them separately

ps: defined on the prototype must be used in the instance object

const CheckObj2 = function(){}
CheckObj2.prototype.checkName \= function(){
    console.log("checkName")
}
CheckObj2.prototype.checkEmail \= function(){
    console.log("checkEmail")
}
CheckObj2.prototype.checkPassword \= function(){
    console.log("checkPassword")
}

Prototype methods can be created in batches, and chained calls can be implemented when the return is this

const CheckObj3 = function(){}
CheckObj3.prototype \= {
    checkName: function(){
        console.log("checkName")
        return this
    },
    checkEmail: function(){
        console.log("checkEmail")
        return this
    },
    checkPassword: function(){
        console.log("checkPassword")
        return this
    }
}
let b \= new CheckObj3()
b.checkName().checkEmail().checkPassword()

This article is transferred from https://www.cnblogs.com/xt112233/p/15609779.html , in case of infringement, please contact to delete.

The main function of closures is to build a separate scope, in which some variables will not pollute the global, but also meet some necessary operations

For example, bookNum, written on the outside will pollute the whole situation_ In the book function, the static use will be destroyed again, and the instance cannot be accessed from the outside

const Book = (function () {
    // private variable
    let bookNum = 0
    // Private method
    function checkBook(name) {}
    // Create class
    function \_book(newId, newName, newPrice) {
        // private variable
        let name, price
        // Private method
        function checkID(id) {}
        // privileged method 
        this.getName = function () {}
        this.getPrice = function () {}
        this.setName = function () {}
        this.setPrice = function () {}
        // Public attribute
        this.id = newId
        // public Method 
        this.copy = function () {}
        bookNum ++
        if(bookNum > 100){
            throw new Error("The number of books exceeds 100")
        }
        // constructor 
        this.setName(name)
        this.setPrice(price)
    }
    // Build prototype
    \_book.prototype = {
        // Static public attribute
        isJSBook: true,
        // Static public method
        display: function () {}
    }

    return \_book
})()

const book \= new Book(1, "JS", 100)
console.log(book)

This article is transferred from https://www.cnblogs.com/xt112233/p/15609798.html , in case of infringement, please contact to delete.

When we create an instance object, if we forget new

const Book1 = function (title, time, type) {
    this.title = title
    this.time = time
    this.type = type
}
const book1 \= Book1("JavaScript", "2021", "js")

In the browser, the following execution will return undefined JavaScript 2021 JS in turn

console.log(book1)
console.log(this.title)
console.log(this.time)
console.log(this.type)

Because no new instance is created, it is equivalent to statically executing Book1. this points to window, which is actually the called window.title window.time window.type

Therefore, a security mode can be designed to prevent forgetting new

const Book2 = function (title, time, type) {
    if(this instanceof Book2){
        this.title = title
        this.time = time
        this.type = type
    } else {
        return new Book2(title, time, type)
    }
}

This article is transferred from https://www.cnblogs.com/xt112233/p/15609823.html , in case of infringement, please contact to delete.

Adding prototypes to objects

const obj = {
    x:1,
    y:2,
    add:function(a, b){
        return a + b
    }
}

Adding prototypes using prototype

const Empty = function(){}
Empty.prototype \= obj
const empty \= new Empty()
empty.add(1, 2)    // 3

Use Object.create() to directly create an instance object of an object that inherits the prototype

const test = Object.create(obj, {    // The second parameter is not transferred. The default value is {}
    "a": {
        value: 10,
        writable:false
    },
    "b": {
        value: 100
    },
})

When override is overloaded, the prototype itself is not modified

empty.x = 10
console.log(empty.x)    // 10
console.log(obj.x)        // 1

View prototype

Object.getPrototypeOf(empty)

Detection properties

In and hasOwnProperty can be used to detect whether a property exists in an object

hasOwnProperty can only detect its own properties, not the prototype chain. in can detect its own properties or inherited properties

const o = {x:1}

o.hasOwnProperty("x")
"x" in o

getOwnPropertyDescriptor can view the current property description, but only its own properties

// Output {value: 1, writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(o, "x"))

Adding properties to an object

The four characteristics of data attributes are: value writable enumerable configurable

Object.defineProperty(o, "y", {
    value: "test",           // value
    enumerable:false,    // Enumerable
    writable:false,         // Writability
    configurable:false    // Configurability
})    

Accessor

The four characteristics of accessor properties are: get, set, enumerable, and configurable

const o = {
    x: "",
    get getX(){
        return this.x
    },
    set setX(val){
        this.x = val
    }
}

You can use closures to implement private properties and customize get set s

const Test = (function(){
    let x \= "10"
    return function(){
        this.getX = function(){
            return x
        }
        this.setX = function(val){
            x \= val
        }
    }
})()

This article is transferred from https://www.cnblogs.com/xt112233/p/15613980.html , in case of infringement, please contact to delete.

Posted on Sat, 27 Nov 2021 21:28:48 -0500 by nilansanjaya