• ES5 的 setter 和 getter


    有两种方式使用 setter 和 getter

    1. set/get

    var person = {
    	_name: '',
    	get name() { return this._name },
    	set name(n) { this._name = n }
    }
    
    // 测试
    person.name // ''
    person.name = 'john' // 'john', 此时 person._name 也变成了 'john'
    

    2. Object.defineProperty

    var person = {}
    var name = ''
    Object.defineProperty(person, 'name', {
    	configurable: true,
    	enumerable: true,
    	get: function() {
    		return name
    	},
    	set: function(n) {
    		name = n
    	}
    })
    
    // 测试
    person.name // undefind 
    person.name = 'john' // 'john',此时全局的 name 也变成了 'john'
    

    当然,通常用 setter 和 getter 来实现私有变量

    // 私有变量
    var person = function() {
    	var _name = ''
    	var _age  = 0
    	return {
    		get name() { return _name },
    		set name(n) { _name = n },
    		get age() { return _age },
    		set age(a) { _age = a }
    	}
    }()
    

    或者

    // 私有变量
    var person = function() {
    	var _name = ''
    	var _age  = 0
    	var obj = {}
    	Object.defineProperty(obj, 'name', {
    		configurable: true,
    		enumerable: true,
    		get: function() {
    			return _name
    		},
    		set: function(n) {
    			_name = n
    		}
    	})
    	Object.defineProperty(obj, 'age', {
    		configurable: true,
    		enumerable: true,
    		get: function() {
    			return _age
    		},
    		set: function(a) {
    			_age = a
    		}
    	})	
    	return obj
    }()
    

    当然,setter 和 getter 最牛逼的用处是用来实现目前流行的 “双向绑定”,MVxx之类的库。不支持 setter 和 getter 的低版本浏览器则只能用轮询的方式来搞了。

  • 相关阅读:
    MX550如何?说些你不知道的事情
    WinUI 及其前身比较
    C# 子线程快速终止的几个办法
    实现web实时消息推送的7种方案
    关于ReactNative 的一点个人见解
    superset docker 部署
    .NET 7 性能改进 至今为止最快的.NET平台
    网易严选多端组件库OSSA正式开源
    npm太慢, 淘宝npm镜像使用方法
    CocoaPods换源
  • 原文地址:https://www.cnblogs.com/snandy/p/5283837.html
Copyright © 2020-2023  润新知