前端基础进阶（九）：详解面向对象、构造函数、原型与原型链

作者: 这波能反杀 | 来源:发表于2017-03-07 01:43 被阅读16478次

由于某些原因，文章已经删除，打算迁移到别处，目前正在寻找更合适的平台。

请大家关注我的新公众号ar_indus，随后我会在公众号里推送新的博客地址。

后续计划的《react进阶系列》文章也会在新公众号中推送。

公众号二维码

ar_indus

网友评论

moonoa:""而Function的原型对象同时又是Object原型的实例。"应该写成“Object函数”吧，对象怎么能是构造函数的原型的实例呢

223b7fbe7c04:configurable默认为 false，writable默认值也为false

3545a8e08726:// 重新设置name属性的类型，让其不可被枚举
Object.defineProperty(person, 'name', {
enumerable: false
})

var params_ = [];
for(var key in person) {
params_.push(key)
}

// 再次查看枚举结果
console.log(params_); // ['age']

这里，为什么不能枚举却还能获取到age。

woow_wu7:喜欢上楼主了

59682e798fff:波老师，这里是不是写错了？
var Student = function(name, age, grade) {
// 通过call方法还原Person构造函数中的所有处理逻辑
Student.call(Person, name, age);
this.grade = grade;
}

是不是应该Person.call(this,name,age)?

360cabdafa52:@daniellian186 我觉得也是写错了，毕竟在此前Student函数还为定义

75c4fe8609a0:我觉得也是写错了

b7bfb8ee19a4:波波老师，第二张图有疑问，构造函数Function中有_proto_属性，构造函数Object中有_proto_属性。为什么构造函数中会有_proto_属性？？我理解的应该第三张图才是对的。但是代码跑一下，构造函数中确实有_proto_属性

不净莲华:@Wrigley 它既是构造函数又是实例当然有_proto_属性啊

angelpig1214:感谢波同学，有个建议，原型图片讲解有错，希望能换一下，这样如果新人没有看到评论的话，又不了解原型相关概念容易误解。希望能换下图

dd295f8fb65e:Jquery插件 http://t.cn/RKj3egR

evil_08e0:---------------我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个【对象】。【这个对象】，就是我们这里说的原型。

好晕啊，【这个对象】我始终不明白是哪个对象。。。。。。高程上也是这样解释的，找来找去都没能弄明白，可否解惑

c5c463e0f646:@evil_08e0 就是说function 也是个对象，然后呢，这个对象有个prototype 属性。然后这个属性的作用是指向一个对象的。然后指向的这个对象是原型对象。这样子对吗？

evil_08e0:@S_cb36 其实是自己理解复杂了，function本身就是一个对象

c5c463e0f646:我也读到这里不明白，你现在明白了吗？

鱼飞跃月:一路看过来，唯一篇全部都能看懂的文章，前端之路其修远兮

653e97c1f3b2:new 那段代码解释我记得我第一次看到是当年再看蝴蝶书的时候看到的

另一种灿烂生活09:function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.getName = function() {
return this.name;
}

var p1 = new Person('tim', 10);

console.log('name' in p1); // true

这里原型对象里的this是指向了window，要不要应该用contructor将它指向构造函数，这样this才有用

a3106a4eac54:醍醐灌顶！！

chenpipy:都说javascript万物皆对象，没想到Object本身竟然是函数类型

景色分明丶:函数也是对象

夏目祐太:感谢波波，让我终于搞清楚了构造函数，原型与实例三者的关系。

0ee2b173518e:很多人喜欢用浏览器UA的方式来判断，但并不是很好的方式，为什么这么说 @波同学

这波能反杀:@jerrod 因为麻烦不全面

4f50c37a75c6:波老师，原型链那张图错了吧，Function.prototype.__proto__ 应该指向Object.prototype吧

快乐的睡不醒:这里的{}并不是最初的那个原型对象。因此它里面并不包含constructor属性。
这个解释错了，他不是不包含constructor属性，而是他的constuctor指向的是Object

梁王io:文章后面那里的继承原型那里直接赋值prototype，是不是应该还要把constructor改成cPerson，不然会出现继承混乱啥的吧我记得。

晨思的海:原型链那张图错了哦，Function.prototype 指向 Object.prototype 而不是 Object
可以把以下代码粘贴到控制面板查看下
function a(){}
a.prototype.__proto__ === Object.prototype

lastnigtic:终于有点理解继承机制

真棒！

sheepmiee:老波，第三张图有点小问题，Function.prototype .__proto__指向的应该是Object.prototype ，图示指向的是Object，看看是不是

这波能反杀:@唐僧肉没有bug 噢，对，短路了，我仔细理理

sheepmiee:@波同学一个实例__proto__指向的应该是其所属类的prototype ，而不是其所属类

这波能反杀:@唐僧肉没有bug Function的原型，是Object的实例，Function.prototype .__proto__指向的是Object构造函数。

c5e2a94f1b07:预估接下来会有精彩的设计模式讲解 😆

这波能反杀:@曾浩_a8a9 接下来分析一下jquery，然后开始讲ES6，最后基于ES6讲解几个模块的例子，这系列就完结了

3080c9539ed1:不说

5925d5123ff6:波同学你好，我把此文章放到了 linkedinfo.co ，我的一个业余小项目。如您觉得不妥，请随时联系我将之撤下。

linkedinfo.co 是一个集合了各类优秀技术文章的站点，不展现全文，所有条目都附上作者与原文链接，读者最终都会进入到作者原文的站点。做 linkedinfo 的初衷是想方便自己且方便其他想学习的朋友，能更方便地找到自己感兴趣的技术文章。同时这也是一个我自己练习的过程，比如将正在学习的 Semantic Web 技术应用到 linkedinfo 来更好地连接不同的知识。

各位感兴趣的朋友可以去 https://linkedinfo.co 看看，非常希望能得到你们的意见与建议 (可在about 页面留言 https://linkedinfo.co/about )。

429ab58dd3c1:很给力！已经收藏

Chan丶:有用，另外推荐一下慕课网的 Javascript深入浅出的OOP章节。http://www.imooc.com/learn/277

chenpipy:果断喜欢啊

chenpipy:波波考老师，想请问下，如果申明一个构造函数，是通过var Person还是function Person？只是执行上下文创建的优先级不同吗，那用那种好一些啊

chenpipy: @波同学感谢，一直支持下去😀

这波能反杀:@chenpipy 都可以

08328781b80d:面向对象这块，还是有些似懂非懂。

08328781b80d: function Person(name,age) {
this.name=name;
this.age=age;
this.getAge=function () {
return this.age;
}
}
Person.prototype.getName = function() {
return this.name
};

function cPerson(name,age,job) {
this.job=job;
//Person.call(this,name,age);
this.__proto__=new Person(name,age);
}

//cPerson.prototype=new Person("PPP",18);
cp=new cPerson("Lucy",23,"actor");
console.log(cp.age);
console.log(cp.getName());
console.log(cp.job);
console.log(cp.getAge());
console.log(cp);
以上是咱的测试代码
输出结果为：
23
Lucy
actor
23

NEO_d1:鼓励！

82a5efd745cb:波同学可以讲讲es6面对对象的变化吗，或者讲讲es6

这波能反杀:es6以后讲

69a7b6c3b4c7:

把原型继承几种方式再搞一篇出来就更棒了波霸同学

这波能反杀:~ ~

沁浒浒浒浒浒浒:1、原型关系图中，实例对象并没有constructor属性，而是继承自其直接原型，可通过instance.hasOwnProperty('constructor')来判断；
2、原型链中，Function.prototype.__proto__===Object.prototype，而不是Function.prototype.__proto__===Object;

沁浒浒浒浒浒浒:@波同学额，对象的共有方法都是定义在Object.prototype中的，譬如toString、valueOf等，你怎么能说Object.prototype是null?Object不是原型链的终点，null才是原型链的终点，Object.prototype.__proto__===null。

这波能反杀:@沁浒浒浒浒浒浒感谢指正，应该是我理解错了

69a7b6c3b4c7:对的我也去测试了

69a7b6c3b4c7:嗯继承还有很多可以写的地方期待波同学能够继续写篇关于继承的这个系列我每篇都读了收获非常大最喜欢的还是this那篇哈哈哈哈

bc61c7d9f8fa:我觉得实例图中有个错误，就是实例对象不会有constructor这个属性，他应该是在prototype对象下面，实例能够访问到也是因为__proto__指向了prototype对象。

这波能反杀:感谢，已修改

kerush:路漫漫其修远兮，加油

这波能反杀:

128f587d6ed6:一本正经厚颜无耻继续点赞

这波能反杀:

哈哈

董小姐Stly:哈哈，好开心啊，刚学完面向对象，实话说挺懵的，看到楼主的文章了，今天熬夜也得把文章看完。跪谢楼主啦😀

这波能反杀:@董小姐Stly

加油

淘淘笙悦:你好，我看了高程3，里面的图中对象实例没有constructor属性。

这波能反杀:确实没有，我理解错了，sorry，已经改正

淘淘笙悦: @波同学好的，谢谢。

这波能反杀:@淘淘笙悦你可以自己输出查看

2409a4e81c18:原型的第一个code 里面有单词打错了，
console.log(p1.getName === p2.getName);

这波能反杀:@Frame_ada1 感谢指正

芒果屋里的猫:撸主说工厂模式不能识别对象实例的类型，不是很懂，用instanceof和typeof不是可以吗？求解释

这波能反杀:@芒果屋里的猫 instanceof与typeof 功能完全不一样

活在当下安好:感谢大神，又帮我复习了一遍原型和继承，真希望每天都有新文章

这波能反杀:@cy919781483 每天肯定不行 ~

895bba51a1e1:这周把这几篇挨个看了，赞

这波能反杀:

65804a694143:// 可以这样
var person = {};
obj.name = "TOM";
obj.getName = function() {
return this.name;
}

// 也可以这样
var person = {
name: "TOM",
getName: function() {
return this.name;
}
}

发现一个小错误，这里的obj应该改成person

这波能反杀:@简单最美928 奥，感谢指正

120376811946:function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}

var p1 = new Person('tim', 10);
var p2 = new Person('jak', 22);
console.log(p1.getName === p2.getName); //这里你写错了

这波能反杀:感谢指正

这波能反杀:@槑錢例子里p1.getName === p2.getName就是true呀

077fa51c09b2:加1，刚才看的时候也发现这里错了，p1.getName === p2.getName是false,p1.getName ==p2.getName才是true，不过这是为什么呢？求大神指导

YC____:终于等到你

这波能反杀: