摘要:要知道,面向对象只是一种手段,最终目的是为了提高我们项目的重用性灵活性和扩展性。两个参数分别是子类和父类,第一段代码这段代码就是将父类上面的属性拷贝到子类上,因为当中函数也是对象,可以扩展属性的。
概述
自从面向对象的编程思想出现以来,这个概念已经被炒烂了,只要编程开发大家都会拿面向对象来说事,好像只要跟面向对象沾边就会显得逼格很高一样,不过确实逼格提高了。要知道,面向对象只是一种手段,最终目的是为了提高我们项目的重用性、灵活性和扩展性。
为了迎合面向对象的程序设计思想,JavaScript也通过自己的语法实现了自己的一套面向对象机制。不过我想问下,前端开发当中有多少人使用过面向对象当中的继承?
JavaScript面向对象的实现确实有点不伦不类的感觉。下面先简单说明下JavaScript当中面向对象的实现,涉及的东西比较深,要对constructor、prototype有一定的理解,不然看起来会很吃力,或者你也可以跳开这部分内容,直接看CoffeeScript面向对象的实现。
JavaScript面向对象编程 类JavaScript的实现一个类,可以采用下面的方式:
</>复制代码
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
console.log(this.name);
};
var animal = new Animal("animal");
animal.printName();
C++、Java...某些程序员可能就吐槽了,我TM都连个关键字class都没看到,这就是类了?
作为一个前端开发,我竟无言以对。。。
继承选取JavaScript当中几种继承方式,作一个简单的说明,想要学习更深的内容,请通过搜索引擎吧。
对象冒充</>复制代码
function Animal(name) {
this.name = name;
this.printName = function () {
console.log(this.name);
};
}
function Cat(name) {
this.inherit = Animal;
this.inherit(name);
//Animal.call(this, name);
//Animal.apply(this, [name]);
}
var cat = new Cat("cat");
cat.printName();//cat
注释是通过call和apply实现的方式,其实本质是一样的。继承实现了,闲着无聊,我们来打印下:
</>复制代码
console.log(cat instanceof Animal);//false
这次别说后端开发看不下去,我都忍不了了。这种方式只能说是通过JavaScript的语法机制,模拟实现继承,看起来好像是那么回事,不然怎么叫对象冒充呢。
原型链实现</>复制代码
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
console.log(this.name);
};
function Cat() {
}
Cat.prototype = new Animal("cat");
var cat = new Cat();
cat.printName();//cat
打印:
</>复制代码
console.log(cat instanceof Animal);//true
这次对了,cat也是Animal类的实例了,有点面向对象的的意思了。我又闲着无聊了(约么?),再来打印
</>复制代码
console.log(cat.constructor); //[Function: Animal]
咦,又不对了,为啥cat的constructor指向Animal,不应该指向Cat么?
问题出在Cat.prototype = new Animal("cat")上,直接给prototype赋值,改变了constructor的指向,这个时候,我们还要做个处理
</>复制代码
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
console.log(this.name);
};
function Cat() {
}
Cat.prototype = new Animal("cat");
Cat.prototype.constructor = Cat;
var cat = new Cat();
console.log(cat.constructor); //[Function: Cat]
但是又有人吐槽了,new Cat()为啥把名称放到new Animal()里面,看起来太奇怪了,综合一下就有了第三中——混合型。
</>复制代码
实际上instanceof的判断原理是跟原型链是相关的。大家自行脑洞!
混合实现
</>复制代码
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
console.log(this.name);
};
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat = new Cat("cat");
cat.printName();//cat
看起来舒服点了,也就是舒服那么一点点。
多态直接拿混合型的继承来说明了,这个比较简单
</>复制代码
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
console.log(this.name);
};
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
Cat.prototype.printName = function () {
console.log("The name is:" + this.name);
};
var cat = new Cat("cat");
cat.printName();//The name is:cat
CoffeeScript面向对象编程
CoffeeScript的面向编程的语法同JavaScript比较起来,真是天上地下。一个阳春白雪,一个下里巴人。但是有一点我们要记住:CoffeeScript只是编译到JavaScript,它只是在JavaScript的基础上进行了语法的抽象,本质上还是JavaScript。
类CoffeeScript采用class关键字声明类,整个语法看起来更加简明流畅。
</>复制代码
#编译前
class Animal
constructor: (name)->
@name = name
printName: ->
console.log(@name)
animal = new Animal "animal"
animal.printName() #animal
#编译后
var Animal, animal;
Animal = (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
return console.log(this.name);
};
return Animal;
})();
animal = new Animal("animal");
animal.printName();
constructor是构造函数,就上面的例子来说,还可以简写,实际上效果是一样的
</>复制代码
class Animal
constructor: (@name)->
printName: ->
console.log(@name)
animal = new Animal "animal"
animal.printName() #animal
CoffeeScript将我们习惯性的书写方式变成丰富的语法糖。说到这里我就想说一句了,能不能把构造函数换个字符,constructor丫太长了。
继承继承使用的是extends关键字
</>复制代码
#编译前
class Animal
constructor: (@name)->
printName: ->
console.log(@name)
class Cat extends Animal
cat = new Cat "cat"
cat.printName() #cat
#编译后
var Animal, Cat, cat,
extend = function (child, parent) {
for (var key in parent) {
if (hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
},
hasProp = {}.hasOwnProperty;
Animal = (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.printName = function () {
return console.log(this.name);
};
return Animal;
})();
Cat = (function (superClass) {
extend(Cat, superClass);
function Cat() {
return Cat.__super__.constructor.apply(this, arguments);
}
return Cat;
})(Animal);
cat = new Cat("cat");
cat.printName();
extend函数解析
我们简单分析下编译后的extend函数,对JavaScript原型链不是很熟的可以跳过这段。两个参数分别是子类child和父类parent,第一段代码:
</>复制代码
for (var key in parent) {
if (hasProp.call(parent, key)) child[key] = parent[key];
}
这段代码就是将父类上面的属性拷贝到子类上,因为JavaScript当中函数也是对象,可以扩展属性的。什么意思?看代码
</>复制代码
class Animal
constructor: (@name)->
printName: ->
console.log(@name)
Animal.prop = "Animal prop"
class Cat extends Animal
console.log Cat.prop #Animal prop
第二段代码:
</>复制代码
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
可能大家看不大明白,我稍微改动下,换种写法
</>复制代码
child.prototype = new parent();
child.prototype.constructor=child;
这里就是我们上面提到的原型链继承。再看最后段代码:
</>复制代码
child.__super__ = parent.prototype;
这里是为了在子类中调用父类的方法,实现多态,看下面的例子就知道了。
多态编译后的代码太长,就不粘贴了,看CoffeeScript代码更易于学习。
直接重写父类方法</>复制代码
class Animal
constructor: (@name)->
printName: ->
console.log(@name)
class Cat extends Animal
printName: ->
console.log "Cat name:" + @name
cat = new Cat "cat"
cat.printName() #Cat name:cat
重写父类方法,在重写的方法中调用父类方法
</>复制代码
class Animal
constructor: (@name)->
move: (meter)->
console.log(meter)
class Cat extends Animal
move: ->
console.log "Cat move"
super 4
cat = new Cat "cat"
cat.move() #Cat move 4
</>复制代码
有任何问题,欢迎大家批评指出,我们共同进步。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85565.html
摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...
摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...
摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...
摘要:而造成一些莫名其妙的错误。写一个文件打印出编译命令会在同级目录下生成一个同名的文件。将包裹在了一个匿名函数当中,并用调用,这样使得代码隔离,不会和外部混淆。其中的表示的就是为了方便使用,可以使用双冒号来替代。 很早就知道这CoffeeScript一门语言,但是一直没有机会系统的学习下,那天趁在公司没有什么要紧的项目做,就根据CoffeeScript首页的例子学了一下。 引用Coffe...
阅读 2533·2021-10-12 10:12
阅读 1711·2019-08-30 15:52
阅读 2451·2019-08-30 13:04
阅读 1739·2019-08-29 18:33
阅读 965·2019-08-29 16:28
阅读 452·2019-08-29 12:33
阅读 2061·2019-08-26 13:33
阅读 2363·2019-08-26 11:36
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要