__defineGetter__ 引发的思考
发布在一个前端小鸟的吟唱2016年4月2日view:2693面试
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

问题

那天朋友分享了一个面试题,自己当时不会,代码如下:

(function(){
    var u = { a: 1, b: 2 };
    var r = {
        m: function(k){
            return u[k];
        }
    }
    window.r = r;
})()

var R = window.r;
alert(r.m('a'))

很简单,alert的结果是1。

但是题目却是另外一个说法,能不能通过r.m获取到u?

当时听到这个问题也凌乱了,压根就不知道啥意思,通过r.m获取到u?

实际上这个问题问的重点是当u不知道的时候,如何通过u[attribute]这种方式来获得u的自身。那么问题就来了,你需要传递一个attribute,r.m(attribute) 返回 u。

解决方案

有一个非标准的,而且将被废弃的方法 Object.prototype.__defineGetter__ 可以给对象指定一个参数并且绑定一个函数,当未来你在此对象的实例上调用此参数时,绑定的函数会被调用,该参数是被定义在 prototype 上,所以此参数就是一个实例属性,那个函数被调用时,是以当前实例为上下文。

哦?那这样的话u就是一个实例,给u绑定一个参数,当此参数调用的时候返回u自身不就好啦?

怎么绑定呢?u是一个Object的实例,它继承自Object,那么就给 Object.prototype 定义一个属性,使得该属性访问时调用的函数返回 this 就可以了,所以,解决方案如下:

Object.prototype.__defineGetter__('uuu', function(){ return this; });
alert(R.m('uuu'));

此题这样就算解决了,此题的精髓主要是三点:

  1. 你能否想到通过属性访问自身
  2. 你能否想到使用原型继承来定义访问自身的属性
  3. 你是否知道 Object.prototype.__defineGetter__

优化解决方案

为了不污染 Object 原型链,我们应该定义一个随机的参数来返回自身,当使用之后再删除之,那么比较完美的方案应该是:

Object.prototype.__defineGetter__('x123c3', function(){ return this; });
alert(R.m('x123c3'));
delete Object.prototype['x123c3']

既然废弃了,有没有替代方法?

嗯,本来自己不太清楚,感谢网友的帮忙。

目前存在这么一个API:Object.defineProperty(obj, 'key', { // descriptor }); 参阅API

使得可以直接在某一对象上定义一个属性,这个属性可以是添加或修改现有的属性,前两个参数都很好理解,obj就是要修改的对象,key就是属性名,descriptor是一个对象,用来声明新添属性的一些特性,包括6个参数:

  • configurable:默认false,表示此属性是否可用delete删除
  • enumerable: 默认为false,表示此属性是否可被for...in、Object.keys遍历到
  • value:默认undefined,此属性的值,可以是任何JavaScript类型
  • writable:默认为false,此属性是否可被改写
  • get:默认undefined,指定一个函数,当属性被调用时,此函数也被调用,默认为返回属性值
  • set:默认undefined,指定一个函数,当属性被赋值时,此函数也被调用,仅接受一个参数,参数为属性被赋的值

那么上面的解决方案可以改为:

Object.defineProperty(Object.prototype, 'blablabla', {
    get : function(){
        return this;
    }
});
console.log(R.m('blablabla'));
评论
发表评论
9个月前

应该是alert(R.m(”a”)) 吧

2年前

@张小俊128 嗯,感谢,是这样。 Object.defineProperty(Object.prototype, 'blablabla', { get : function(){ return this; } });

2年前

一样的思路,用Object.defineProperty:

Object.defineProperty(Object.prototype,function(){ get: function () { return this } })

WRITTEN BY
叔叔张
前端老司机 / 理财爱好者
TA的新浪微博
PUBLISHED IN
一个前端小鸟的吟唱

本专栏主要关注下一代Web技术,诸如WebComponents、ES6、HTML5 WebApp、HTML5 Game Development、Node.js等技术。

我的收藏