functional继承模式 摘自javascript:the good parts
更新时间：2011年06月20日 19:53:03 作者：
javascript:the good parts 书中Inheritance部分讲到了一种functional的继承方式, 具体这个functional该如何翻译,就不是很清楚了, 就直接意会一下吧
这种模式的作用在于确保对象属性的真正私有化, 我们无法直接访问对象的状态, 只能通过特权方法来进行操作.
下面直接来个例子吧.
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性别 默认男性
that.getGender = function() {
return cfg.gender || 'male';
};
return that;
};
var programmer = function(cfg) {
var that = person(cfg),
share = {};
share.status = 'normal';
that.getFamiliarLanguage = function() {
return (cfg.langs || []).join(' ');
};
that.getProfile = function() {
return 'hi,my name is ' + that.getName();
};
that.getStatus = function() {
return share.status;
};
that.setStatus = function(status) {
share.status = status;
};
return that;
};
var me = programmer({
name: 'AndyZhang',
gender: 'male',
// 熟悉的语言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
从代码中可以看到,我们调用programmer方法时,没用使用new, 而且方法里也没有出现this关键字.
如果出现类似this.name = cfg.name这样的属性赋值代码, 再用new去调用(构造函数调用方式),这样产生的对象的name属性就不再私有.如:
// 这里方法名的首字母大写 以表示作为一个构造方法 用new来调用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一个person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本来是想让name, gender成为私有 用类似setter getter方法来读写 就像javaBean一样
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
从上面的例子可以看出person1的属性我们是可以直接访问的,没有做到真正的private. 有时候我们会用代码规范或约定来表示我们定义的某个属性是私有的,比如this._name用这样的写法表示name属性是私有的. 个人觉得只要约定统一,这也是一种不错的方式, 在第三方js库中,这种运用的可能比较多,像YUI2
继续看最开始的代码, 没有用到this, 而是用了that作为载体, 从programmer方法中我们看到that所起到的作用, 调用person后,返回的that已经具有了person所具有的方法getName, getGender, 然后我们根据programmer具体的需要在that基础上进行扩展, 当然也可以覆写原来的方法, programmer中的share可以用来集中一些私有变量和方法, 通过javascript的scope和closure机制, 可以在that扩展的方法中对它们进行处理和调用, 比如代码中的that.getStatus和that.setStatus方法, 最后return that.
下面直接来个例子吧.
复制代码 代码如下:
var person = function(cfg) {
var that = {};
that.getName = function() {
return cfg.name || 'unknow name';
};
// 性别 默认男性
that.getGender = function() {
return cfg.gender || 'male';
};
return that;
};
var programmer = function(cfg) {
var that = person(cfg),
share = {};
share.status = 'normal';
that.getFamiliarLanguage = function() {
return (cfg.langs || []).join(' ');
};
that.getProfile = function() {
return 'hi,my name is ' + that.getName();
};
that.getStatus = function() {
return share.status;
};
that.setStatus = function(status) {
share.status = status;
};
return that;
};
var me = programmer({
name: 'AndyZhang',
gender: 'male',
// 熟悉的语言
langs: ['javascript', 'java', 'php']
});
console.debug(me.getFamiliarLanguage());
console.debug(me.getProfile());
me.setStatus('oh really busy..');
console.debug(me.getStatus());
从代码中可以看到,我们调用programmer方法时,没用使用new, 而且方法里也没有出现this关键字.
如果出现类似this.name = cfg.name这样的属性赋值代码, 再用new去调用(构造函数调用方式),这样产生的对象的name属性就不再私有.如:
复制代码 代码如下:
// 这里方法名的首字母大写 以表示作为一个构造方法 用new来调用
var Person = function(cfg) {
this.name = cfg.name;
this.gender = cfg.gender;
}
// new出一个person1
var person1 = new Person({
name: 'Andrew',
gender: 'male'
});
// 本来是想让name, gender成为私有 用类似setter getter方法来读写 就像javaBean一样
alert(person1.name); // 'Andrew'
alert(person1.gender); // 'male'
从上面的例子可以看出person1的属性我们是可以直接访问的,没有做到真正的private. 有时候我们会用代码规范或约定来表示我们定义的某个属性是私有的,比如this._name用这样的写法表示name属性是私有的. 个人觉得只要约定统一,这也是一种不错的方式, 在第三方js库中,这种运用的可能比较多,像YUI2
继续看最开始的代码, 没有用到this, 而是用了that作为载体, 从programmer方法中我们看到that所起到的作用, 调用person后,返回的that已经具有了person所具有的方法getName, getGender, 然后我们根据programmer具体的需要在that基础上进行扩展, 当然也可以覆写原来的方法, programmer中的share可以用来集中一些私有变量和方法, 通过javascript的scope和closure机制, 可以在that扩展的方法中对它们进行处理和调用, 比如代码中的that.getStatus和that.setStatus方法, 最后return that.
相关文章
在数组的使用中我们通常会有数组的过滤的需求,比如值在某个范围内的数字,用来组成一个新的数组,这就用到了数组的过滤,下面这篇文章主要给大家介绍了关于JS数组中filter方法使用的相关资料,需要的朋友可以参考下2022-07-07
本文主要介绍了JS图片压缩的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了js禁止浏览器的回退事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了JS实现的仿淘宝交易倒计时效果,涉及JavaScript针对时间与日期的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
下面小编就为大家带来一篇JS正则替换掉小括号及内容的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具2022-08-08
这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
下面小编就为大家带来一篇浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。2015-08-08
最新评论