博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【初窥javascript奥秘之面向对象】封装与继承
阅读量:6946 次
发布时间:2019-06-27

本文共 6209 字,大约阅读时间需要 20 分钟。

前言
javascript是一种基于对象的语言,意思是我们遇到的所有东西几乎都是对象(函数也是)。
虽然class为js的保留字,但是他没有任何实际意义(当他有实际意义了,我们很多代码又要重新写啦。。。),因为js并不是真正意义上的变相对象编程语言,所以class名存实亡。
js面向对象的路在何方?
本人才疏学浅所以文中会有一些错误请各位指出,因为是边写做实验的,所以会有我的思考过程,行文可能会有点乱,请见谅。
最简单的封装
我们来看一个“面向对象”的例子:
复制代码
//        var Person = new Object();
var Person = {
    name: '叶小钗',
    getName: function () {
        return this.name;
    }
};
var n = Person.getName();
alert(n);
复制代码
这种写法让我们感觉一目了然,他让我们感觉到了面向对象,但是他的缺点也很明显:
按道理说name应该是私有变量,但我们这里可以无耻的访问之,修改之。
另外就是想要用这种方法生产多个实例就是一个传说(虽说可以实现)
虽说如此,他还是完成了js最简单的封装,具有面向对象的特性了。
但是这种方式其实并不适合用来定义程序相关流程,而应该用来保存数据,比如json相关,所以曾经这么做的同学以后建议不要这么做了。
隐藏私有变量
复制代码
 1 var info = {
 2     name: '叶小钗',
 3     age: 105
 4 };
 5 
 6 var Person = function (cfg) {
 7     this.name = cfg.name || '';
 8     function getName() {
 9         return getName;
10     }
11 }
12 
13 var name = Person.getName();
复制代码
以上代码,我就是想说明会报错罢了,因为在js中只有函数具有作用域,函数外部是无法访问还是内部的变量的,函数内部却可以访问函数外部的东西,在函数内存在内部函数,且内部函数用到了外部函数变量便会延长作用域链,形成传说中的闭包。
但是,在以上情况下,若我要访问其中的方法有以下做法:
1 将getName做返回值返回
2 在外部定义全局变量,在函数内部将getName赋予他(最简单window.getName = getName)
这两种方法各有各的问题,方法一函数每次都会创建,用完便会销毁;方法二永远不会销毁
由于以上原因便因此了今天的主角——构造函数。
new与构造函数
当一个函数被构建时,Function构造器产生的函数会被隐式赋予一个prototype属性
prototype包含一个constructor对象,而constructor便是该新函数对象
constructor意义不大,但记住每个函数都会拥有prototype属性
我们这里再来理一理这个prototype:
在js中函数都会有一个prototype属性
该属性指向另一对象(亦包含prototype),如此便形成了原型链,并最终指向object对象
在某个对象调用某个方法时,若是他没有该方法就会向上查找直到object
新声明函数的prototype指向object对象,其constructor指向函数对象本身
PS:所以根据构造函数创造的对象,其原型指向构造函数的原型
算了,通俗点来说便是:
prototype就是一模板,新创建的模板就是对他的一个拷贝(虽说本质是指针的指向。。。)
即构造函数拥有prototype属性(指向一个对象,包括方法与属性),这些都会被构造函数实例继承。
复制代码
 1 var Person = function (name) {
 2     this.name = name;
 3 };
 4 Person.prototype.getName = function () {
 5     return this.name;
 6 };
 7 
 8 var y = new Person('叶小钗');
 9 var n = y.getName();
10 var s = '';
复制代码
以上便是一个简单的应用,但我们还是来理一理:
复制代码
 1 (function () {
 2     var Person = function (name) {
 3         this.name = name;
 4     };
 5     Person.prototype.getName = function () {
 6         return this.name;
 7     };
 8     var y = new Person('叶小钗');
 9     var s0 = Person.constructor.constructor === Function;
10     var s1 = Person.constructor === Function;
11     var s2 = Person.prototype.constructor === Person;
12     var s3 = Person.prototype === Object;
13     var s4 = Person.constructor === Object;
14     var s5 = y.constructor === Person;
15     
16     var s = '';
17 })()
复制代码
如图所示:
1 对象y的构造函数指向Person构造函数
2 构造函数Person原型中包含了指向自己的constructor属性
3 构造函数的constructor属性指向Function
4 Function的constructor最终指向object
我们抛开其他的不说,就说y对象:
我们根据new操作符实例化了y对象,按照之前说的,y对象便会对Person构造函数的prototype属性做一次拷贝
而拷贝的属性中暗藏一个constructor属性,而该constructor属性指向了Person,所以他们产生了联系,我们这里可以做个小小的变动:
instanceof:如果obj对象是构造函数Fun的一个实例,则 obj instanceof Fun 返回 true,
复制代码
 1 (function () {
 2     var Person = function (name) {
 3         this.name = name;
 4     };
 5 
 6     Person.prototype = {
 7         getName: function () {
 8             return this.name;
 9         }
10     };
11     var y = new Person('叶小钗');
12     var s1 = Person.prototype.constructor === Person;
13     var s2 = y.constructor === Person;
14     var s3 = y instanceof Person;
15 
16     var s = '';
17 })()
复制代码
我们看到,虽然我们强制取消了构造函数的constructor属性,但是y还是属于Person的实例,所以constructor真没什么用了。。。
继承
我们所谓继承,便是子类拥有父类公开出来的方法罢了,到这里理解就变成了子函数拥有父函数所有prototype属性,于是:
复制代码
 1 (function () {
 2     var Person = function (name) {
 3         this.name = name;
 4     };
 5     //Person.prototype = {};//这句将影响十分具有constructor属性
 6     Person.prototype.getName = function () {
 7         return this.name;
 8     };
 9 
10     var Student = function (name, sex, id) {
11         this.name = name || '无名氏';
12         this.sex = sex || '不明';
13         this.id = id || '未填'; //学号
14     };
15     //相当于将其prototype复制了一次,若是包含constructor的话将指向Person
16     Student.prototype = new Person();
17     Student.prototype.getId = function () {
18         return this.id;
19     }
20     var y = new Person();
21     var s = new Student;
22     var s1 = y instanceof Person;
23     var s2 = s instanceof Student;
24     var s3 = s instanceof Person;
25     var s4 = Student.prototype.constructor === Person;
26     var s5 = Student.constructor === Person;
27     var s6 = Student.constructor === Function;
28 
29     var s = '';
30 })();
复制代码
根据此例子,他们彼此间的关系还是比较明显了,我这里单独说下prototype下的属性:
一般情况下,prototype下用于定义函数,但并不是说他属性没用,若是给他定义属性的话相当于每个子对象共享着一个数据!
一个重要的暗示便是:我们可以根据该数据(数组、对象字面量)来传递信息,比如我们会遇到这个场景的。
我们做了一个用于验证表单输入的控件,他对每个元素进行单独验证,但是当我们提交表单时我们会需要知道整个表单上哪些元素可以,哪些不可以,这个时候我们的prototype属性可能就可以派上用场了!(个人理解,有误请指出)
又如,我前面写过一篇文章:基于jQuery的下拉菜单菜单【02】,诸位上眼!!!,里面就用到了这个东西,具体便不展开了。
isPrototypeOf/hasOwnProperty
isrototypeOf该方法拥有判断某个prototype对象和某个实例之间的关系:
复制代码
 1 (function () {
 2     var Person = function (name) {
 3         this.name = name;
 4     };
 5     //Person.prototype = {};//这句将影响十分具有constructor属性
 6     Person.prototype.getName = function () {
 7         return this.name;
 8     };
 9 
10     var Student = function (name, sex, id) {
11         this.name = name || '无名氏';
12         this.sex = sex || '不明';
13         this.id = id || '未填'; //学号
14     };
15     //相当于将其prototype复制了一次,若是包含constructor的话将指向Person
16     Student.prototype = new Person();
17     Student.prototype.getId = function () {
18         return this.id;
19     }
20     var y = new Person();
21     var s = new Student;
22 
23     var s1 = Student.prototype.isPrototypeOf(s);
24     var s2 = Student.prototype.isPrototypeOf(y);
25     var s3 = Person.prototype.isPrototypeOf(y);
26     var s4 = Person.prototype.isPrototypeOf(Student);
27     var s5 = Person.prototype.isPrototypeOf(Student.prototype);
28 
29 
30     var s = '';
31 })();
复制代码
说白了就是看某个实例是否是属于自己,这里随便提一个问题大家看看:
    var s6 = Function.prototype.isPrototypeOf(Person);
    var s7 = Function.prototype.isPrototypeOf(Student);
hasOwnPrototype用来判断一个属性到底是本地属性还是继承自prototype,这里就不举例了
语法糖
关于以上继承的写法也许不太“面向对象”,所以我们提供看这个语法糖:
复制代码
 1 (function () {
 2     Function.prototype.method = function (name, func) {
 3         this.prototype[name] = func;
 4         return this;
 5     };
 6     Function.method('inherits', function (Parent) {
 7         this.prototype = new Parent();
 8         return this;
 9     });
10 
11     var Person = function (name) {
12         this.name = name;
13     };
14 
15     Person.method('getName', function () {
16         return this.name;
17     });
18 
19     var Student = function (name, sex, id) {
20         this.name = name || '无名氏';
21         this.sex = sex || '不明';
22         this.id = id || '未填'; //学号
23     };
24 
25     Student.inherits(Person);
26     Student.method('getId', function () {
27         return this.id;
28     });
29 
30     var y = new Person();
31     var s = new Student;
32 
33     var s = '';
34 })();
复制代码
 
结语
小弟自知对面向对象相关了解不够透彻,今天便写到这里吧,希望某天能带来面向对象的作品。
如果你觉得这篇文章还不错,请帮忙点击一下推荐,谢谢!
 
本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/archive/2013/04/25/3042113.html,如需转载请自行联系原作者
你可能感兴趣的文章
kafka client使用kerberos
查看>>
修复ThinkPad一键恢复功能
查看>>
HowTo: Linux / UNIX List Just Directories Or Di...
查看>>
死锁、进程通信以及进程线程的区别
查看>>
javascript 将HTML导出word(非IE)
查看>>
360 网站安全通用防护脚本分享,可修复漏洞
查看>>
qt creator doxygen 快速注释文档
查看>>
学习 LLVM(12) SmallString
查看>>
[转]关于java文件读写、字节流、字符流的一点新得
查看>>
Yii2 Day 5: 创建用户模块
查看>>
java classloader的一个bug
查看>>
Java内存泄露分析
查看>>
常量池、栈、堆的比较
查看>>
二项分布、指数分布与泊松分布的关系
查看>>
关于Android中PendingIntent的认识
查看>>
java & orac版根据权重抽奖算法 (两个方案都有)
查看>>
mysql查询索引优化
查看>>
centos下载地址
查看>>
使用 ScheduledExecutorService 来替换 Timer
查看>>
ubuntu修改IP地址和网关的方法
查看>>