宝哥软件园

Javascript面向对象编程(一)封装

编辑:宝哥软件园 来源:互联网 时间:2021-10-18

学习Javascript最难的部分是什么?我认为对象是最难的。因为Javascript的Object模型是独一无二的,不同于其他语言,初学者不容易掌握。这是我的学习笔记,希望对你学习这部分有所帮助。我主要参考以下两本书:

面向对象的JavaScript

003010(面向web开发人员的专业JavaScript,第二版)它们都是优秀的Javascript阅读材料,推荐阅读。笔记分为三个部分。今天的第一部分是讨论“封装”,第二和第三部分将讨论“继承”。==============================Javascript面向对象编程(一):包作者:阮一峰Javascript是一种基于对象的语言,你遇到的几乎所有东西都是对象。但是,它不是真正的OOP语言,因为它的语法中没有类。那么,如果我们想把‘property’和‘method’打包成一个对象,甚至从原型对象生成一个实例对象,我们应该怎么做呢?1.生成对象的原始模式假设我们把猫看作一个对象,它有两个属性:“名称”和“颜色”。复制代码如下:varcat={name: ' ',color:''}现在,我们需要根据这个原型对象生成两个实例对象。复制代码如下: var cat1={ };//创建一个空对象cat1.name=“大毛”;//根据原型对象的属性赋予cat1.color='黄色';var cat 2={ };Cat2.name='两根头发';Cat2.color=' black好的,这是最简单的包裹。然而,这种写作方法有两个缺点。第一,如果生成更多的例子,写起来会很麻烦。其次,没有办法看到实例和原型之间的联系。2.原始模式的改进我们可以编写一个函数来解决代码重复的问题。复制代码如下:函数cat (name,color) {return {name 3360 name,color : color}}然后生成一个实例对象,相当于调用一个函数:复制代码如下: var cat1=Cat('大毛','黄');Var cat2=Cat('两根头发','黑色');这种方法的问题是cat1和cat2之间没有内在联系,不能反映它们是同一个原型对象的实例。3.构造器模式为了解决从原型对象生成实例的问题,Javascript提供了一种构造器模式。所谓的‘构造函数’实际上是一个普通函数,但是这个变量是内部使用的。通过在构造函数上使用新的运算符,可以生成一个实例,并将此变量绑定到实例对象。比如cat的原型对象现在可以这样写了,复制代码如下:函数cat(名称,颜色){this。name=namethis.color=color}我们现在可以生成实例对象。复制代码如下: var cat1=新cat('大毛','黄');Var cat2=新猫('两根头发','黑色');alert(cat1 . name);//大毛警报(cat 1 . color);//黄色的cat1和cat2将自动包含指向其构造函数的构造函数属性。复制代码如下:alert (cat1。构造函数==cat);//true alert(Cat 2 . constructor==Cat);//true Javascript还提供了一个instanceof运算符,用于验证原型对象和实例对象之间的关系。复制代码如下:警报(cat的cat1实例);//真正的警报(cat的cat2实例);//true 4。构造函数模式的问题构造函数方法非常有用,但是存在浪费内存的问题。看,我们现在给Cat对象添加一个不变的属性“type”,然后添加一个方法eat。然后,原型对象cat变成如下:复制代码如下:函数Cat(名称,颜色){ this.name=namethis.color=colorThis.type='猫科动物';This.eat=function(){alert('吃老鼠');};}还是用同样的方法生成一个例子:复制代码如下: var cat1=new Cat('大毛','黄');Var cat2=新猫('两根头发','黑色');警报(cat 1 . type);//cat 1 . eat();//表面上看起来吃老鼠没什么不好,但实际上这样做有很大的缺点。也就是说,对于每个实例对象,type属性和eat()方法都是完全相同的内容,每次生成实例时,都必须是重复的内容,占用更多的内存。

这既不环保也不高效。alert(cat 1 . eat==cat 2 . eat);//false可以让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址吗?答案是肯定的。5.原型模式下的Javascript规定每个构造函数都有一个指向另一个对象的原型属性。构造函数实例将继承此对象的所有属性和方法。这意味着我们可以直接在原型对象上定义不变的属性和方法。复制的代码如下:功能猫(名称,颜色){这个。name=namethis.color=color} cat . prototype . type=' cat ';cat . prototype . eat=function(){ alert('吃老鼠')};然后,生成一个实例。复制代码如下: var cat1=新cat('大毛','黄');Var cat2=新猫('两根头发','黑色');警报(cat 1 . type);//cat 1 . eat();//吃鼠标时,所有实例的type属性和eat()方法实际上是同一个内存地址,指向原型对象,提高了运行效率。alert(cat 1 . eat==cat 2 . eat);//true6。原型模式的验证方法6.1 isPrototypeOf()该方法用于判断proptype对象和实例之间的关系。复制代码如下: alert(cat . prototype . is prototype of(cat1));//true alert(cat . prototype . isprototypeof(cat 2));//true 6.2 hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法,用于确定某个属性是本地的还是从原型对象继承的。复制代码如下:alert (cat1。hasown property(' name ');//true alert(cat1 . hasown property(' type '));//false 6.3 in运算符in运算符可以用来判断一个实例是否包含属性,是否是局部的。复制代码如下:警报(' cat1中的名称');//true alert('type '在cat1中);//true in运算符也可用于遍历对象的所有属性。for(cat 1中的var prop){ alert(' cat 1[' prop ']=' cat 1[prop]);}未完成,请继续阅读本系列第二部分《面向对象的Javascript》和第三部分《Javascript高级程序设计(第二版)》。(结束)

更多资讯
游戏推荐
更多+