首页 > 作文

js的原型、原型链解析

更新时间:2023-04-03 13:50:18 阅读: 评论:0

js的原型、原型链

一、javascript继承机制

在javascript语言中,new命令后面跟的不是类,而是构造函数(javascript语言的传统方法通过构造函数定义并生成实例对象,es6中新增了class语法糖,通过对象模版定义和生成实例对象)。用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。因此javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。因此可以把那些不变的属性和方法,直接定义在prototype对象上,然后生成实例。由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像”继承”了prototype对象一样,这可简单理解为javascript的继承机制。

二、原型

在javascript中,原型也是一个对象,通过原型可以实现对象的属性继承,javascript的对象中都包含了一个”[[prototype]]”内部属性,这个属性所对应的就是该对象的原型。
“[[prototype]]”作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,firefox和chrome中提供了__proto__这个非标准(不是所有都支持)的访问器(ecma引入了标准对象原型访问器”object.getprototype(object)”)。在javascript的原型对象中,还包含一个”constructor”属性幼儿园放假,这个属性对应创建所有指向该原型的实例的构造函数。

三、对象实例化规则

在javascript中,每个函数 都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给所有对象实例(也就是设置 实例的`__proto__`属性),也政法类院校就是说,所有实例的原型引用的是函数的prototype属性。(注:只有函数对象才会有这个属性。函数具有prototype属性,但函数也是对象,因此也具有__proto__属性,实例对象只有__proto__属性)。

实例化对象(new)的过程:例 let person = new person(‘刘’, 18)

let person = {}:初始化一个对象person; person.__proto__ = person.prototype:为对象person添加__proto__属性,且该属性指向 person.prototype; person.call(person, “刘”, 18):重新定义person内的this,调用构造函数person初始化person。

四、object

object对象本身是一个函数对象。既然是中国文明网向国旗敬礼网上签名object函数,就肯定会有prototype属性,所以可以看到”object.prototype”的值就是”object {}”这个原型对象。反过来,当访问”object.prototype”对象的”constructor”这个属性的时候,就得到了obejct函数。
另外,当通过”object.prototype.__proto__”获取object原型的原型的时候,将会得到”null”,也就是说”object {}”原型对象就是原型链的终点了。

五、function

所有的函数都是特殊三角函数 function 的实例。在构造函数上都有一个原型属性 prototype,该属性也是一个对象;那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数;而实例对象上有一个 _proto_ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在中,该属性用于浏览器内部使用。

如上面例子中的构造函数,javascript中函数也是对象,所以就可以通过__proto__查找到构造函数对象的原型。
function对象作为一个函数,就会有prototype属性,该属性将对应”function () {}”对象。
function对象作为一个对象,就有__proto__属性,该属性对应”function.prototype”,也就是说,”function.__proto__ === function.prototype”。

在这里对“prototype”和“proto”进行简单的介绍:
对于所有的对象,都有__proto__属性,这个属性对应该对象的原型.
对于函数对象,除了__proto__属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的__proto__属性)。

六、原型链

因为每个对象和原型都有原型,对象的原型指向原型对象,而父的原型又指向父的父,这种原型层层连接起来的就构成了原型链。以person和person为例:

person.__proto__ === person.prototype,

而 person.prototype(即person {}) 也有_proto属性,它指向创建它的函数对象(object)的prototype,即person.__proto__ === object.prototype,

而 object.protptype(即object {}) 同样有__proto__属性,只是该属性指向特殊,为null,表明其已到达了顶端。

这一系列由__proto__ 串起来的链称为原型链

七、构造函数、原型、实例之间的关系

1. object

(非原创图)

2.function+object+array

(非原创图)

八、属性查找:

当查找一个对象的属性时,javascript 会向上遍历原型链,直到找到给定名称的属性为止,到查找到达原型链的顶部(也就是 object.prototype),如果仍然没有找到指定的属性,就会返回 undefined。例:

function person(name, age){

this.name = name;

this.age = age;

}

person.prototype.maxnumber = 9999;

person.__proto__.minnumber = -9999;

let will = new person(“will”, 28);

console.log(will.maxnumber); // 9999

console.log(will.minnumber); // undefined

在这个例子中分别给”person.prototype “和” person.__proto__”这两个原型对象添加了”maxnumber “和”minnumber”属性,这里就需要弄清”prototype”和”__proto__”的区别了。

九、”prototype”和”__proto__”的区别

仍以person、person为例。

person作为构造函数时的prototype 属性与person作为普通函数时的__proto__属性并不相等:

console.log(person.__proto__ == person.prototype); //fal

实际上,person作为一个普通函数调用时,它的构造函数就是内置对象function,因此其指向的原型对象即function.prototype,与person.__proto__ === person.prototype同理。它的原型的原型指向为:

console.log(person.__proto__.__proto__ ); //object{}

即console.log(function.prototype.__proto__ ); //object{}

当person作为构造函数时,它的原型、它的原型的原型指向为:

console.log(person.prototype); //person{}

console.log(person.prototype.__proto__); //object{}

可得结果:

console.log(person.__proto__.__proto__ === person.prototype.__proto__); //true

因此:prototype属性可以给函数和对象添加共享(继承)的方法、属性,而__proto__是查找某函数或对象的原型链的方式。所以可以说原型链是通过__proto__属性链接起来的。

上面的例子中若想will查找到minnumber属性,则添加方式为:

person.minnumber = -9999;

或 person.prototype.__proto__.minnumber = -9999;

“person.prototype “对应的就是person构造出来所有实例的原型,也就是说”person.prototype “属于这些实例原型链的一部分,所以当这些实例进行属性查找时候,就会引用到”person.prototype “中的属性。

十、对象创建方式影响原型链

let july = {

name: “张三”,

age: 28,

getinfo: function(){

console.log(`${this.n学校部门ame} is ${this.age} years old.`);

}

}

console.log(july.getinfo());

当使用这种方式创建一个对象的时候,原型链就变成下图了. july对象的原型是”object.prototype”也就是说对象的构建方式会影响原型链的形式。)

十一、总结

1.所有的对象都有__proto__属性,该属性 对应 该对象的原型.

2.所有的函数对象都有prototype属性,该属性的值会被赋值给该函数创建的实例对象的_proto_属性.

3.所有的原型对象都有constructor属性,该属性对应创建所有指向该原型的实例的构造函数.

4. 函数对象和原型对象通过prototype和constructor属性进行相互关联.

5. prototype属性可以给函数和对象添加共享(继承)的方法、属性,而__proto__是查找某函数或对象的原型链的方式。

本文发布于:2023-04-03 13:50:17,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2a03985c0f88216d91824a7fdeacbb99.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:js的原型、原型链解析.doc

本文 PDF 下载地址:js的原型、原型链解析.pdf

标签:原型   属性   对象   函数
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图