JS复习--原型链小结

Gu_Yan 发布于2019-08-22 14:57 / 684人阅读

摘要：为什么需要原型链为了实现继承，具有相同特性的代码不需要重复编写，放在构造函数里面，实例化的对象都会拥有里面的属性了，也就是可以共享属性和方法。

一段简单代码引入

function Foo() {}；

var f1 = new Foo();

1.概念简单理解

Foo()是构造函数，构造函数有一个prototype属性

Foo.prototype 是f1的原型对象，有一个constructor属性，指向该原型对象对应的构造函数，即

Foo.prototype.constructor

console.log(Foo.prototype.constructor === Foo);//true

console.log(f1._proto_=== Foo.prototype);//true

console.log(f1._proto_.constructor=== Foo);//true

f1是Foo的实例对象，自身没有constructor属性，但可以继承原型对象的属性，即

console.log(f1.constructor === Foo);//true

console.log(f1.hasOwnProperty("constructor"));//false

2.结合demo

原型链是对于构造函数而言的，首先定义一个构造函数，再实例化生成一个实例对象，可能在实例对象中没有定义某个属性，但是在构造函数中有，那么它就会往上（向构造函数中）查找，这个查找的过程就叫做原型链。

function Foo(){};

Foo.prototype.name = "ziziyaya";

var foo=new Foo();

console.log(foo.name); //ziziyaya

3.为什么需要原型链

为了实现继承，具有相同特性的代码不需要重复编写，放在构造函数里面，实例化的对象都会拥有里面的属性了，也就是可以共享属性和方法。

function Dog() {

    this.eat = "food";

    this.smell = "smart";

}

let dog1 = new Dog();

let dog2 = new Dog();

dog1.name = "huang";

dog2.name = "hei";

console.log(dog1.name+","+dog1.eat+","+dog1.smell);//huang,food,smart

console.log(dog2.name+","+dog2.eat+","+dog2.smell);//hei,food,smart

推荐文章：http://www.ruanyifeng.com/blo...

4.继续往上引申--Foo.prototype的构造函数是Object(),原型对象是Object.prototype

console.log(Foo.prototype.__proto__ === Object.prototype);//true

实例对象Foo.prototype本身具有constructor属性，所以它会覆盖继承自原型对象Object.prototype的constructor属性

下面是自身没有constructor属性，继承自原型对象的f1和自身有constructor属性覆盖了原型对象的Foo.prototype 截图对比

再往上引申如果Object.prototype作为实例对象的话，其原型对象是什么，结果是null
附加一篇简洁易懂的原型链理解的文章 http://www.cnblogs.com/shuiyi...

GPU云服务器云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93031.html

JS对象小结

摘要：返回新对象构造函数与其他函数的唯一区别，就在于调用它们的方式不同。在默认情况下，所有原型对象都会自动获得一个构造函数属性，这个属性是一个指向属性所在函数的指针。对象 1.对象的定义无序属性的集合，其属性可以包含基本值，对象或者函数。每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。 2.对象的创建 ======= 通过new创建对象 new...

mzlogin 2019-08-22 18:45 评论0 收藏0
2018.11.19秋招末第二波前端实习/校招小结

摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，vue技术栈时间背景大概是在11月9日准备...

suxier 2019-08-29 17:21 评论0 收藏0
2018.11.19秋招末第二波前端实习/校招小结

摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，vue技术栈时间背景大概是在11月9日准备...

canger 2019-08-26 13:25 评论0 收藏0
深入理解JS的面向对象（更新中）

摘要：的面向对象主要包含了两块创建对象继承。构造函数一般来说，我们可以这样定义构造函数构造函数的函数名常大写在这里，我们没有显示的创建对象，没有语句，却将属性和方法赋值给了。面向对象是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象是一种对现实世界理解和抽象的方法...

陈伟 2019-08-22 15:07 评论0 收藏0
复习Javascript专题（三）：面向对象（对象的创建与继承，原型及原型链）

摘要：在创建子类实例时，不能向超类型的构造函数中传递参数。构造函数继承子类传进的值是基本思想是在子类构造函数的内部调用超类或父类型构造函数。继承保证构造函数指针指向如果想同时继承多个，还可使用添加属性的方式类继承， OOP：Object Oriented Programming 面向对象编程。题外话：面向对象的范围实在太大，先把这些大的东西理解理解。 1.什么是对象？根据高程和权威指南上...

testHs 2019-08-23 13:39 评论0 收藏0