博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript对象——原型与原型链
阅读量:7146 次
发布时间:2019-06-29

本文共 2660 字,大约阅读时间需要 8 分钟。

原型与原型链

一. 普通对象与函数对象
  • JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明
var o1 = {};var o2 = new Object();var o3 = new f1();function f1(){};var f2 = function(){};var f3 = new Function('str');typeof Object;//functiontypeof Function;//functiontypeof f1;//functiontypeof f2;//functiontypeof f3;//functiontypeof o1;//objecttypeof o2;//objecttypeof o3;//object

在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。

二.构造函数
function Person(name, age, job){    this.name = name;    this.age = age;    this.sayName = function(){        alert(this.name);    }}var person1 = new Person('mike',15);var person2 = new Person('nike',18);

上例中person1和person2为Person的实例,两个实例中都有隐含的

==constructor==属性(通过原型对象继承得到),该属性指向构造函数Person

三.原型对象
  • 我们创建的每个函数都有一个prototype(原型)属性,指向函数的原型对象。换句话说,prototype就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象即可以让所有对象实例共享它所包含的属性和方法,可类比于父子类(继承)。
  • 创建新函数时,其prototype属性指向的原型对象会自动获得一个constructor(构造函数)属性,该属性指向包含prototype的函数,也就是构造函数
function Person(name, age, job){    Person.prototpe.name = father;    Person.prototpe. = 28;    Person.prototpe.sayName = function(){        alert(this.name);    }}var person1 = new Person();person1.sayName();//'mike'var person2 = new Person();person2.sayName();//'nike'person1.sayName == person2.sayName;//trueperson1.name = 'joy';person1.sayName();//'joy'

通过为构造函数Person的原型对象创建属性,person1,person2将继承Person.prototype的属性,如果实例定义了与原型对象同名属性,原型对象属性则会被覆盖。

补充:更简单的原型语法
function Person(){}Person.prototype = {    name:'',    age:'',    sayName:function(){    }}

==注意==:该方法的原型对象的constructor属性不再指向Person,此时例中指向Object(新new的一个对象),如若需要可在Person.pertotype的字面量中添加:==constructor:Person,==

四.__proto__
  • JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__ 的内置属性,用于指向创建它的构造函数的原型对象。

  • 普通对象的__proto__指向这个对象(this)的构造函数的prototype;
  • 函数对象的__proto__全部都是指向Function的prototype。

对象 person1 有一个 __proto__属性,创建它的构造函数是 Person,构造函数的原型对象是 Person.prototype ,所以:

==person1.__proto__ == Person.prototype==

不过,要明确的真正重要的一点就是,这个连接存在于实例==person1==与构造函数==Person==的原型对象==Person.prototype==之间,而不是存在于实例person1与构造函数Person之间。

js高级程序设计图

image

五.Prototype

当我们创建一个函数时:

var Person = new Object()
Person 是 Object 的实例,所以 Person 继承了Object 的原型对象Object.prototype上所有的方法:
image

六.Object.getPrototypeOf(obj)

获取对象的原型

总结
  • 原型和原型链是JS实现继承的一种模型。
  • 原型链的形成是真正是靠__proto__ 而非prototype
  • 对象通过__proto__属性访问原型,构造函数通过prototype属性访问原型

  • Object 是所有对象的爸爸,所有对象都可以通过 proto 找到它
  • Function 是所有函数的爸爸,所有函数都可以通过 proto 找到它
  • Function.prototype 和 Object.prototype 是两个特殊的对象,他们由引擎来创建
  • 除了以上两个特殊对象,其他对象都是通过构造器 new 出来的
  • 函数的 prototype 是一个对象,也就是原型

    对象的 proto 指向原型, proto 将对象和原型连接起来组成了原型链

转载于:https://www.cnblogs.com/y-dt/p/9381443.html

你可能感兴趣的文章
币安布局去中心化交易所,原来是因为这三个原因!
查看>>
nodeJS贪吃蛇
查看>>
为什么S/4HANA的销售订单创建会触发生产订单的创建
查看>>
php原生数据库分页
查看>>
92. Reverse Linked List II
查看>>
js组合模式和寄生组合模式的区别研究
查看>>
Bye, 2018; Hi, 2019
查看>>
谈谈super(props) 的重要性
查看>>
LeetCode22.括号生成 JavaScript
查看>>
cookie localstorage sessionStorage
查看>>
某数加密的流程与原理简析
查看>>
《前端十年心路》书稿规划
查看>>
Java虚拟机规范(目录)
查看>>
4.java数组
查看>>
阿里开发者们的第19个感悟:Simple is better.
查看>>
区块链技术进阶
查看>>
超简单七步,解决windows下安装PaddlePaddle的权限错误!
查看>>
Appium框架
查看>>
微信小程序教程系列之设置标题栏和导航栏
查看>>
Jenkins 用户文档(入门)
查看>>