ES5 的 setter 和 getter

Posted tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 的低版本浏览器则只能用轮询的方式来搞了。

 

以上是关于ES5 的 setter 和 getter的主要内容,如果未能解决你的问题,请参考以下文章

vue2响应式原理

angular和vue区别

Vue2/Vue3 响应式原理

angular和vue的差别

Vue.js2.0核心思想

从0实现MVVMVueJS源码解读