phpstudy集成环境

 首页 > 类和原型的问题

类和原型的问题

JavaScript中没有类只有原型。。。以前一直以为有类才有对象的，那么问题就来了。原型跟类到底有什么区别和共同点了，最本质的区别在哪里？

前者是静态的，一般继承关系不可变；后者是动态的，运行期可以改变继承关系。

一点浅陋看法，请指教。

谁告诉你javascript中没有类的?都2016了。

戳我

借用某位大大的话，原型是儿童的世界，类是成人的世界。儿童的世界没有什么约束，只要你觉得有相似的都可以通过原型链的方式链接起来。而成人的世界遵守严格的类属关系，类的继承需要有这样的类属关系才能确定起来

根据我的理解，外加一些我的主观判断。javascript的原型也就是指的是prototype，prototype这个东西一般是用于继承，用于向对象里添加方法和属性的。而至于类的意思，其实可以理解成一个分类，当时这种分类是以编程思维来定义的，我们把无数个对象的特点提取出来，无数个对象的共同点提取出来，就是一个分类，就依旧拿这个人这个类来说，人这个类就是人都有的一个共同的特点的一个总括，关于人的这个定义，这个人就包含了很多东西了，然后里面有很多自定义的特点，然后根据这个人的分类来进行创建一个具体的人。就像你对水杯的定义，假设我定义水杯的样子是可以装水，可以喝水，水杯的属性有高度，形状，直径，盖子，等等。然后我制造几个具体的水杯，每个水杯的不同的具体属性的值不一样，怎么去做这个事情有一定的细微差别，比如我定义其中一个水杯的直径只有3厘米，另外两个水杯的直径有5厘米，等等。创造出来的这些具体的水杯就是对象，也就是说对象是一个具体化的东西，类是一个抽象化的东西。
以上是关于对象和类的一些梳理，大部分是我利用实际的一些情况进行的一些解释。至于javascript的原型，也就是prototype这个东西，相当于我们后续发现杯子这个类的具体属性或者所做的事情不只这些，然后就通过prototype来进行添加这些属性值，也就是对这个杯子这个类新增一些定义。
不过，依据我的感觉，javascript定义了一个类了之后就会自动实例化的，也就是说，我们写的时候，其实写的是类，但是真正在用的时候不需要进行手动实例化。会自动实例化成一个对象，直接就可以使用了，这里是我根据我的理解来进行的解释，这里其实应该是符合早起的JavaScript没有类的概念的。
比如：

var cup = {
    height : 20,
    drink : function() {
        console.log('喝水');
    }
}
cup.drink(); //不需要实例化，直接使用

但是像以上的情况，按照以上的方式来定义一个类，没有实例化，那么一个类就只能创建一个对象，按照我们关于类和对象的定义来说，应该是一个类可以创建无数个不同的对象，只要是根据这个类来创建就可以了，在满足单一功能的实现可以采用上面的方式。但假设这么一种情况：
我网页里有三四处要上传图片的地方，那么如果只能实例化一个这样的类来进行操作，肯定不能满足需求。所以以下这种方式可以满足基于类

function aa() {
    this.bb = function($bb) {
        console.log($bb);
    }
}
var obj1 = new aa();
var obj2 = new aa();
obj1.bb('aabb'); //实例化对象1
obj2.bb('bbaa'); //实例化对象2

关于prototype这里的东西更多了，以上都是我的大致说了一下，要把这些东西说完，可能要写上几千字才能解释完全。
对了，我记得我在早期学习javascript的时候，书本上告诉我javascript是基于对象的，而不是面向对象的，我想，这个大概意思就是不需要实例化对象，创建的就是对象吧，这里的解释可能不够准确。
以下是关于prototype的东西
看以上的第二个代码
假设在obj1的时候，对bb这个方法进行了修改，那么obj2是不能共用的，因为在创建对象的时候，是属于两个具体的对象。prototype的功能可以进行新增方法
如：

function aa() {
    this.bb = function($bb) {
        console.log($bb);
    }
}
aa.prototype.cc = function($cc) {
    console.log($cc);
}
var obj1 = new aa();
var obj2 = new aa();
obj1.bb('aabb'); //实例化对象1
obj2.bb('bbaa'); //实例化对象2
obj2.cc('aabbcc'); //这里obj2使用新增的cc
aa.prototype.dd = function($dd) {
    console.log($dd);
}
obj1.dd('aabbccdd'); //obj1继续可以使用dd

其实以上的代码相当于以下的代码：

function aa() {
    this.bb = function($bb) {
        console.log($bb);
    }
    this.cc = function($cc) {
        console.log($cc);
    }
    this.dd = function($dd) {
        console.log($dd);
    }
}
var obj1 = new aa();
var obj2 = new aa();
obj1.bb('aabb'); //实例化对象1
obj2.bb('bbaa'); //实例化对象2
obj2.cc('aabbcc');
obj1.dd('aabbccdd');

利用js原型的性质可以实现类的封装

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

【热门文章】
【热门文章】