资讯专栏INFORMATION COLUMN

关于javascript的原型和原型链,看我就够了(三)

joyvw / 1462人阅读

摘要:对于中的引用类型而言,是保存着它们所有实例方法的真正所在。高级程序设计构造函数陌上寒原型对象有一个属性,指向该原型对象对应的构造函数为什么有属性那是因为是的实例。

温故

我们先回顾一下前两天讨论的内容

创建对象的三种方式

通过对象直接量

通过new创建对象

通过Object.create()

js中对象分为两种

函数对象

普通对象

原型对象prototype

每一个函数对象都有一个prototype属性,但是普通对象是没有的;

普通对象都是通过函数创建的

在 ECMAScript 核心所定义的全部属性中,最耐人寻味的就要数 prototype 属性了。对于 ECMAScript 中的引用类型而言,prototype 是保存着它们所有实例方法的真正所在。换句话所说,诸如 toString()和 valuseOf() 等方法实际上都保存在 prototype 名下,只不过是通过各自对象的实例访问罢了。----《JavaScript 高级程序设计》
构造函数constructor
function Foo(name) {
    this.name = name;
}
var foo = new Foo("陌上寒");
 console.log(Foo.prototype.constructor===Foo)//true
 console.log(foo.constructor===Foo);//true

原型对象有一个constructor属性,指向该原型对象对应的构造函数
foo 为什么有 constructor 属性?那是因为 foo 是 Foo 的实例。
那 Foo.prototype 为什么有 constructor 属性??同理, Foo.prototype Foo 的实例。
也就是在 Foo 创建的时候,创建了一个它的实例对象并赋值给它的 prototype

隐式原型_proto_

在Firefox、Safari 和 Chrome 的每个对象上都有这个__proto__,属性 ,而在其他浏览器中是完全不可见的为了确保浏览器兼容性问题,不要直接使用 proto 属性)

// 普通对象的\__proto\__指向当前函数对象的原型,
console.log("陌上寒".__proto__===String.prototype);//true
//原型对象(也属于普通对象)的__proto__指向当前函数对象的原型
console.log(String.prototype.__proto__===Object.prototype);//true
//内置函数对象的\__proto\__指向的都是ƒ () { [native code] }
console.log(Object.__proto__);//ƒ () { [native code] }
//Object的原型对象的\__proto\__为null
console.log(Object.prototype.__proto__)//null

普通对象的__proto__指向当前函数对象的原型,

原型对象(也属于普通对象)的__proto__指向当前函数对象的原型

内置函数对象的__proto__指向的都是ƒ () { [native code] }

所有对象(除了Object.prototype)都存在_proto_

Object的原型对象的__proto__为null

好好消化上面的知识点,有助于我么讨论新的内容==>原型链

知新 原型链

原型对象prototype

构造函数constructor

隐式原型_proto_

通过三者之间的联系,形成了原型链
继续看一下我门昨天讨论过的代码

console.log("陌上寒".__proto__===String.prototype);//true
console.log(String.prototype.__proto__===Object.prototype);//true
//等量代换,得出以下结论
console.log("陌上寒".__proto__.__proto__===Object.prototype);//true

我们刚才说过,普通对象的__proto__指向当前函数对象的原型
我们刚才还说过,普通对象都是通过函数创建的
根据以上两个结论我们分析一下上面的代码
‘陌上寒’是字符串类型,’陌上寒’的构造函数是String(), 所以’陌上寒’的__proto__指向String的原型
String是js的内置构造函数,内置构造函数继承自Object
String的原型对象String.prototype也是一个普通对象,它的__proto__指向Object的原型,即Object.prototype
所以

console.log("陌上寒".__proto__.__proto__===Object.prototype);//true

这就是原型链
我们继续品读以下代码

//我们创建一个构造函数Foo(要记得,构造函数命名,首字母要大写)
function Foo() {}
//通过我们自定义的构造函数。通过new操作符,我们实例化出来一个对象foo
const foo = new Foo()
//对象的__proto__指向当前函数对象(foo是同构Foo实例化出来的,所以foo的函数对象是Foo)的原型
console.log(foo.__proto__===Foo.prototype);
//原型对象也存在__proto__,指向该原型对象(Foo.prototype)所对应的函数对象(Object)的原型(好像有点绕,看代码就没那么绕了)
console.log(Foo.prototype.__proto__===Object.prototype);//true
//上面的如果懂了,这行代码就简单了,一个数学的等量代换,就得出了结论
console.log(foo.__proto__.__proto__===Object.prototype);//true
console.log("---我是分割线----");
//我们通过字面量创建了一个对象,等同于 const obj = new Object()
const obj = {}
//obj 是通过内置构造函数Object创建的,所以,obj的__proto__指向它的函数对象(Object)的原型(prototype)即:Object.prototype
console.log(obj.__proto__===Object.prototype);//true
console.log("---我是分割线----");//true
//创建一个对象b
const b = {}
//我们之前说过创建对象有三种方式,我们使用第三种方式创建一个对象b1,对象b1继承自对象b,也就是说,对象b是对象b1的__proto__
const b1 = Object.create(b)
//对象b是对象b1的__proto__
console.log(b1.__proto__===b);//true
//前面已经证实过,b.__proto__==Object.prototype,不再赘述
console.log(b.__proto__==Object.prototype);//true
//等量代换就得出以下结论
console.log(b1.__proto__.__proto__===b.__proto__);//true
console.log(b1.__proto__.__proto__==Object.prototype);//true

我偷了一张图

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

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

相关文章

  • 关于javascript原型原型看我够了(一)

    摘要:要用作原型的对象。函数对象可以创建普通对象,这个我们上面讲过了回顾一下这是一个自定义构造函数普通对象没法创建函数对象,凡是通过创建的对象都是函数对象,其他都是普通对象通常通过创建,可以通过来判断。 关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看要了解原型和原型链,我们得先从对象说起 创建对象 创建对象的三种方式: 对象直接量 通过对象直接量创建...

    MoAir 评论0 收藏0
  • 关于javascript原型原型看我够了(二)

    摘要:原文链接关于的原型和原型链,看我就够了一参考链接闯关记之原型及原型链之原型与原型链一篇文章带你理解原型和原型链彻底理解原型链一的默认指向图解和的三角关系原型和原型链三张图搞懂的原型对象与原型链 温故 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 仔细观察如下代码 function Foo(na...

    eccozhou 评论0 收藏0
  • 关于javascriptObject. hasOwnProperty,看我够了

    摘要:基本概念方法会返回一个布尔值,指示对象自身属性中非继承属性是否具有指定的属性,如果具有带指定名称的属性,则方法返回,否则返回。此方法不会检查对象原型链中的属性该属性必须是对象本身的一个成员。使用语法参数,必需。 hasOwnProperty基本概念 hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定...

    mtunique 评论0 收藏0
  • 深入理解JavaScript,这一篇够了

    摘要:也就是说,所有的函数和构造函数都是由生成,包括本身。如果只考虑构造函数和及其关联的原型对象,在不解决悬念的情况下,图形是这样的可以看到,每一个构造函数和它关联的原型对象构成一个环,而且每一个构造函数的属性无所指。 前言  JavaScript 是我接触到的第二门编程语言,第一门是 C 语言。然后才是 C++、Java 还有其它一些什么。所以我对 JavaScript 是非常有感情的,毕...

    villainhr 评论0 收藏0

发表评论

0条评论

joyvw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<