关于原型和原生API

2022/1/17 6:06:28

本文主要是介绍关于原型和原生API,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

关于原型和原生API

知识

  • o.name = 'huahua' // 此为写操作
  • o.name // 此为读操作

修改对象的原型

  • 不推荐 对象.__proto__ = 别的对象
  • 平静且优雅且推荐 Object.setPrototypeOf(对象, 新的原型对象)

对一个对象添加属性

defineProperty 配置一个属性

let emp = {}
Object.defineProperty(obj, "id", {
    // 弹出提示快捷键: ctrl+i
    writable: false, // 是否可写, 用defineProperty添加属性的默认为false
    enumerable: false, // 是否可遍历 用defineProperty添加属性的默认为false
    configurable: false, // 是否不可删, 不可修改配置 用defineProperty添加属性的默认为false
    value: 1, // 对象属性的默认值
})
写指的是对一个对象赋值如
let o = {name:'jiejie'}

defineProperties 配置多个

let emp = {}
// 			           对象名 配置项
Object.defineProperties(emp, {
    //属性名: 配置项
    id: { value: 1001, enumerable: true },
    age: { value: 39, writable: true, enumerable: true },
    // 语法糖: 在对象内定义方法可以不写 function关键字
    intro: {
        value() { // === function value() {}
            console.log(this.age, this.name)
        },
    },
})

getter和setter

getter
  • 当一个对象被读取操作时触发方法
let emp = {}
// 			           对象名 配置项
Object.defineProperty(emp,"id",{
    get(){
        return 11111
    }
})
setter
let emp = {}
// 			           对象名 配置项
Object.defineProperty(emp, "id", {
    get(){
        return ""
    },
    set(val){
    	console.log("新的值", val)
    	return val
	}
})

return this._id
getter和setter配合使用
let emp = {}
Object.defineProperty(emp, "_id", {
    writable:true,
})
Object.defineProperty(emp, "id", {
    get(){
        // 在这里不可直接返回 this.id 因为这个也是读操作, 会一直调用这个方法的
        return this._id
    },
    set(val){
        this._id = val
        console.log("我是setter方法  我监听到你修改了值", val)
    	return val
	}
})

配合使用绑定多个
let emp = {}
Object.defineProperties(emp, {
     _id:{
        writable:true
	},
    _name:{
        writable:true
	}
})
Object.defineProperties(emp, {
    id:{
        get(){
            
        	console.log("我是getter方法  我监听到你读取了值", this._id)
            return this._id
        },
        set(val){ 
            
        	console.log("我是setter方法  我监听到你读取了值", this._id)
            this._id = val
        }
	},
    name:{
        get(){
            
        	console.log("我是getter方法  我监听到你读取了值", this._name)
            return this._name
        },
        set(val){ 
        	console.log("我是setter方法  我监听到你修改了值", val)
            this._name = val
        }
	},
})

限制属性API

你可能要封装一些东西,这个或许对你有用

  • 不添加属性: Object.preventExtensions()

    "use strict"
    let emp = {
        name:"kyle"
    }
    Object.preventExtensions(emp)
    emp.age = 19
    // 你可以修改,但不会真正的修改 会被隐藏报错,你可以使用"use strict" 开启严格模式
    输出: Uncaught TypeError: Cannot add property age, object is not extensible 不可扩展
        at <anonymous>:6:9
    
  • 不添加或删除属性: Object.seal()

    "use strict"
    let emp = {
        name:"kyle"
    }
    Object.seal(emp)
    delete emp.name
    // 你可以修改,但不会真正的修改 会被隐藏报错,你可以使用"use strict" 开启严格模式
    输出: Uncaught TypeError: Cannot delete property 'name' of #<Object>
    
  • 不添加/删除/修改: Object.freeze()

    "use strict"
    let emp = {
        name:"kyle"
    }
    Object.freeze(emp)
    delete emp.name
    // 你可以修改,但不会真正的修改 会被隐藏报错,你可以使用"use strict" 开启严格模式
    输出: Uncaught TypeError: Cannot delete property 'name' of #<Object>
    
  • 没有读的限制。



这篇关于关于原型和原生API的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程