的函数原型_JS基础函数、对象和原型、原型链的关系

b27c7c88ad80167ac7ee36a5b1107f9c.png

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠“猜”,却不理解它的规则!

prototype

只有函数有prototype属性

let a = {}

let b = function () { }

console.log(a.prototype) // undefined

console.log(b.prototype) // { constructor: function(){...} }

Object.prototype怎么解释?

其实 Object是一个全局对象,也是一个构造函数,以及其他基本类型的全局对象也都是构造函数:

function outTypeName(data, type) {

let typeName = Object.prototype.toString.call(data)

console.log(typeName)

}

outTypeName(Object) //[object Function]

outTypeName(String) // [object Function]

outTypeName(Number) // [object Function]

为什么只有函数有prototype属性

JS通过 new来生成对象,但是仅靠构造函数,每次生成的对象都不一样。

有时候需要在两个对象之间共享属性,由于JS在设计之初没有类的概念,所以JS使用函数的 prototype来处理这部分需要被共享的属性,通过函数的 prototype来模拟类:

当创建一个函数时,JS会自动为函数添加 prototype属性,值是一个有 constructor的对象。

以下是共享属性 prototype的栗子:

function People(name) {

this.name = name

}

People.prototype.age = 23 // 岁数

// 创建两个实例

let People1 = new People('OBKoro1')

let People2 = new People('扣肉')

People.prototype.age = 24 // 长大了一岁

console.log(People1.age, People2.age) // 24 24

为什么 People1People2可以访问到 People.prototype.age

原因是:People1People2的原型是 People.prototype,答案在下方的:构造函数是什么以及它做了什么。

原型链

__proto__和 Object.getPrototypeOf(target):对象的原型

__proto__是对象实例和它的构造函数之间建立的链接,它的值是:构造函数的`prototype。

也就是说:__proto__的值是它所对应的原型对象,是某个函数的 prototype

Object.getPrototypeOf(target)全等于 __proto__

它是ES6的标准,兼容IE9,主流浏览器也都支持,MDN,本文将以 Object.getPrototypeOf(target)指代 __proto__

不要再使用 __proto__:

本段摘自阮一峰-ES6入门,具体解析请点击链接查看

    1. __proto__属性没有写入 ES6 的正文,而是写入了附录。

    2. 原因是它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6

    3. 标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的

    4. 所以无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,应该使用:Object.getPrototypeOf(target)(读操作)、 Object.setPrototypeOf(target)(写操作)、 Object.create(target)(生成操作)代替

构造函数是什么、它做了什么

出自《你不知道的在js》:在js中, 实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。

上文一直提到构造函数,所谓的构造函数,实际上就是通过关键字 new来调用的函数:

let newObj = new someFn() // 构造调用函数

构造/new调用函数的时候做了什么

  1. 创建一个全新的对象。

  2. 这个新对象的原型( Object.getPrototypeOf(target))指向构造函数的 prototype对象。

  3. 该函数的this会绑定在新创建的对象上。

  4. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

  5. 我们称这个新对象为构造函数的实例。

原型继承就是利用构造调用函数的特性

SubType.prototype = new SuperType(); // 原型继承:SubType继承SuperType

// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上

  1. 构造调用的第二点:将新对象的 Object.getPrototypeOf(target)指向函数的 prototype

  2. 构造调用的第三点:该函数的this会绑定在新创建的对象上。

  3. 新对象赋值给 SubType.prototype

原型类型还有缺点:多个实例对引用类型的操作会被篡改,这里就不扩展了。

原型链是什么

来看个例子:

function foo() { }

const newObj = new foo() // 构造调用foo 返回一个新对象

const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象

newObj__proto__ === foo.prototype // true 验证newObj的原型指向foo

const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型

foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype

如果用以前的语法,从 newObj查找 foo的原型,是这样的:

newObj.__proto__.__proto__ // 这种关系就是原型链

可以用以下三句话来理解原型链

  1. 每个对象都拥有一个原型对象newObj的原型是 foo.prototype

  2. 对象的原型可能也是继承其他原型对象的foo.prototype也有它的原型 Object.prototype

  3. 一层一层的,以此类推,这种关系就是原型链

一个对象是否在另一个对象的原型链上

如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。

判断方式有两种,但都是根据构造函数的 prototype是否在原型链上来判断的:

    1. instanceof: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

语法:objectinstanceofconstructor

let test = function () { }

let testObject = new test();

testObject instanceof test // true test.prototype在testObject的原型链上

testObject instanceof Function // false Function.prototype 不在testObject的原型链上

testObject instanceof Object // true Object.prototype在testObject的原型链上

    2. isPrototypeOf:测试一个对象是否存在于另一个对象的原型链上

语法:prototypeObj.isPrototypeOf(object)

let test = function () { }

let testObject = new test();

test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型链上

Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型链上

原型链的终点: Object.prototype

Object.prototype是原型链的终点,所有对象都是从它继承了方法和属性。

Object.prototype没有原型对象

const proto = Object.getPrototypeOf(Object.prototype) // null

下面是两个验证例子,有疑虑的同学多写几个测试用例印证一下。

字符串原型链的终点Object.prototype

let test = '由String函数构造出来的'

let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型

stringPrototype === String.prototype // true 字符串的原型是String对象

Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象

函数原型链的终点: Object.prototype

let test = function () { }

let fnPrototype = Object.getPrototypeOf(test)

stringPrototype === Function.prototype // true test的原型是Function.prototype

Object.getPrototypeOf(Function.prototype) === Object.prototype // true

原型链用来做什么?

属性查找:

如果试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性,以此类推

我们用一个例子来形象说明一下:

let test = '由String函数构造出来的'

let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型

stringPrototype === String.prototype // true 字符串的原型是String对象

Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象

当你访问 test的某个属性时,浏览器会进行以下查找:

  1. 浏览器首先查找 test 本身

  2. 接着查找它的原型对象: String.prototype

  3. 最后查找 String.prototype的原型对象: Object.prototype

  4. 一旦在原型链上找到该属性,就会立即返回该属性,停止查找。

  5. 原型链上的原型都没有找到的话,返回 undefiend

这种查找机制还解释了字符串为何会有自带的方法: slice/ split/ indexOf等。

准确的说:

  • 这些属性和方法是定义在 String这个全局对象/函数上的。

  • 字符串的原型指向了 String函数的 prototype

  • 之后通过查找原型链,在String函数的 prototype中找到这些属性和方法。

拒绝查找原型链:

hasOwnProperty: 指示对象自身属性中是否具有指定的属性

语法:obj.hasOwnProperty(prop)

参数: prop 要查找的属性

返回值: 用来判断某个对象是否含有指定的属性的 Boolean

let test ={ 'OBKoro1': '扣肉' }

test.hasOwnProperty('OBKoro1'); // true

test.hasOwnProperty('toString'); // false test本身没查找到toString

这个 API是挂载在 object.prototype上,所有对象都可以使用,API会忽略掉那些从原型链上继承到的属性。

扩展:

实例的属性

你知道构造函数的实例对象上有哪些属性吗?这些属性分别挂载在哪个地方?原因是什么?

function foo() {

this.some = '222'

let ccc = 'ccc'

foo.obkoro1 = 'obkoro1'

foo.prototype.a = 'aaa'

}

foo.koro = '扣肉'

foo.prototype.test = 'test'

let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方

foo.prototype.test = 'test2' // 重新赋值

上面这道是考察 JS基础的题,很多人都没说对,原因是没有彻底掌握 this原型链函数

想一下再看解析:

想一下再看解析:

想一下再看解析:

想一下再看解析:

想一下再看解析:

    1. this.some: foo1对象的属性

通过构造调用 foothis指向 foo1,所以 this.some挂载在 foo1对象下。

属性查找: foo1.some

foo1.some直接读取 foo1的属性。

    2. foo1.test、 foo1.a: foo1对象的原型

根据上文提到的:构造/new调用函数的时候会创建一个新对象( foo1),自动将 foo1的原型( Object.getPrototypeOf(foo1))指向构造函数的prototype对象。

构造调用会执行函数,所以 foo.prototype.a='aaaaa'也会执行,单就赋值这个层面来说写在 foo外面和写在 foo里面是一样的。

属性查找:foo1.testfoo1.a

  • foo1本身没有找到,继续查找

  • foo1的原型 Object.getPrototypeOf(foo1)上找到了 a和 test,返回它们,停止查找。

    3. foo1.obkoro1和 foo1.koro:返回undefined

静态属性: foo.obkoro1、 foo.koro

函数在JS中是一等公民,它也是一个对象, 用来模拟类。

这两个属性跟 foo1没有关系,它是对象 foo上的两个属性(类似函数的: arguments/ prototype/ length等属性),称为静态属性

它们只能通过 foo.obkoro1foo.koro来访问。

原型对象改变,原型链下游获取的值也会改变

上面那个例子中的 foo1.test的值是什么?

foo.prototype.test = 'test'

let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方

foo.prototype.test = 'test2' // 重新赋值

foo1.test的值是 test2,原因是:foo1的原型对象是 Object.getPrototypeOf(foo1)存的指针,指向 foo.prototype的内存地址,不是拷贝,每次读取的值都是当前 foo.prototype的最新值。

打印 foo1

80a2e3758ad335e2e2ed644d94727846.png

小结

写了好几天,之前网上很多图文博客,那些线指来指去,就我个人看来还是比较难以理解的,所以本文纯文字的形式来描述这些概念,相信认真看完的同学肯定都有所收获,如果没看懂的话,建议多看几遍,这部分概念真的很重要!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python字符串基本操作

直接上图: ispace()是否为空格 isupper()与islower是否为大写或小写 isdigit是否为数字 isalpha是否为字母 isalnum()是否为字母与数字混合体 startswith()与endswith()判断是否以什么开始,以什么结尾转载于:https://www.cnblogs.com/bestSmile/p/405550…

迁移学习自我学习

最近在看Ng的深度学习教程,看到self-taught learning的时候,对一些概念感到很陌生。作为还清技术债的一个环节,用半个下午的时间简单搜了下几个名词,以后如果会用到的话再深入去看。 监督学习在前一篇博客中讨论过了,这…

MTV: Django眼中的MVC

URLconfMTV:Django眼中的MVC MVC是众所周知的模式,即:将应用程序分解成三个组成部分:model(模型),view(视图),和 controller(控制 器)。其中:M 管理应用程序的状态(通常存储到数据库中),并约束改…

createbitmap导致的内存泄漏如何处理_C++ 如何避免内存泄漏,一篇就够

前言近年来,讨论 C 的人越来越少了,一方面是由于像 Python,Go 等优秀的语言的流行,另一方面,大家也越来越明白一个道理,并不是所有的场景都必须使用 C 进行开发。Python 可以应付大部分对性能要求不高的场景…

Visio绘制功能分解图

为什么要绘制功能分解图? 对于编程人员来说,具体分配任务的时候,必须知道自己要做什么,必须了解系统的大体框架。功能分解图可以帮助我们理清程序的框架,便于大局观的掌握。 用Visio2010创建功能分解图 1、选择模版 2、…

Heka:Go编写,来自Mozilla,高效、灵活的插件式数据挖掘工具(转)

转自:http://www.csdn.net/article/2013-05-02/2815116-introduce-from-mozilla-heka-go摘要:一直崇尚开源的Mozilla近日释放了Heka测试版——插件架构,Go编写。在支持使用Go扩展功能的同时,还通过允许“Sandboxed Filters”提供了…

cocos2d学习笔记2——学习资源

1. 视频 找了好几个视频,有一些讲得好的文件资源没有,后来终于找到一个讲得不错还有文件资源的,还有高清下载地址,虽然是2.2版本的,但是确实能学到不少东西,对用cocos2d做游戏有了基本的印象,对…

环境变量_配置JAVA环境变量

本文标识 : J00001本文编辑 : YiKi编程工具 : IDEA阅读时长 : 3分钟什么是环境变量?环境变量是在操作系统中一个具有特定名字的对象, 它包含了一个或者多个应用程序所将使用到的信息。为什么要配置环境变量?为了方便在控制台编译和运行java程序,不…

分布式消息队列 Kafka

分布式消息队列 Kafka 2016-02-25 杜亦舒Kafka是一个高吞吐量的、分布式的消息系统,由Linkedin开发,开发语言为scala具有高吞吐、可扩展、分布式等特点 适用场景 活动数据统计活动数据包括页面访问量(Page View)、被查看内容方面的…

漫游飞行_手机“飞行模式”为何没被淘汰?内行人坦言:其实是你不会用!

随着科技的不断创新,目前市面上出现的手机款式多种多样,品牌也非常多,有华为、苹果、三星和小米等等。手机的屏幕也是五花八门,有刘海屏、水滴全面屏等,这些屏幕之间都各有不同。而且手机的更新换代速度很快&#xff0…

multiselect多选下拉框

具体实现 <input type"hidden" id"q_dueDay" name"q_dueDay" value"${baseQueryBean.q_dueDay}">//这个为隐藏域后台直接使用这个为参数 <select id"example" name"example" multiple"multiple&qu…

scikit-learn点滴

scikit-learn点滴 scikit-learn是非常漂亮的一个机器学习库,在某些时候,使用这些库能够大量的节省你的时间,至少,我们用Python,应该是很难写出速度快如斯的代码的. scikit-learn官方出了一些文档,但是个人觉得,它的文档很多东西都没有讲清楚,它说算法原理的时候,只是描述一下,除…

怎样搭建Android开发平台(转)

Android是基于Linux内核的软件平台和操作系统&#xff0c;是Google在2007年11月5日公布的手机系统平台&#xff0c;早期由Google开发&#xff0c;后由开放手机联盟&#xff08;Open Handset Alliance&#xff09;开发。 它采用了软件堆层&#xff08;software stack&#xff0c…

subject.login(token)是如何确认账号密码的_教你如何删除、关闭、注销微信小程序...

微信小程序是我们日常生活中经常会接触到的工具&#xff0c;打开小程序后&#xff0c;它就会留在我们微信的”“发现-小程序”栏。很多人并不知道该如何删除、关闭小程序&#xff0c;所以今天就跟大家科普下相关问题。1.如何删除小程序首先&#xff0c;打开微信界面&#xff0c…

上海交通大学2006年数学分析考研试题

转载于:https://www.cnblogs.com/zhangzujin/p/4078900.html

出现的是乱码_cad状态栏出现了方框乱码怎么办?

左下角阅读原文看CAD视频好课推荐&#xff1a;1、CAD2014&#xff1a;点击查看 2、室内&全屋&#xff1a;点击查看 3、CAD2019&#xff1a;点击查看4、CAD2018&#xff1a;点击查看5、Bim教程&#xff1a;点击查看6、室内手绘&#xff1a;点击查看7、CAD三维&#xff1a;点…

UILabel 详解

UILabel 多行文字自动换行 &#xff08;自动折行&#xff09;1.UIView *footerView [[UIView alloc] initWithFrame:CGRectMake(10, 100, 300, 180)]; 2. UILabel *label [[UILabel alloc] initWithFrame:CGRectMake(10, 100, 300, 150)]; 3. label.text "…

onclick实现超链接_给超链接加onclick事件

在动态网页中&#xff0c;常常需要在单击超链接时处理一些数据&#xff0c;而不是跳转一个网页。在这种情况下&#xff0c;通常有以下三种处理方式&#xff1a;不设置标签的href属性&#xff0c;只设置onclick属性。在这种处理方式下&#xff0c;通常超链接文本会和正文的文本以…

Android 布局以及优化资料汇总

2019独角兽企业重金招聘Python工程师标准>>> 1.性能优化之布局优化 2.Android 开源库 V - Layout 转载于:https://my.oschina.net/zhugenqiang/blog/822942

mysql字符集排序规则_Mysql 字符集及排序规则

一、字符集字符集&#xff1a;就是用来定义字符在数据库中的编码的集合。常见的字符集&#xff1a;utf8、Unicode、GBK、GB2312(支持中文)、ASCCI(不支持中文)二、字符集排序规则作者本人用的是utf8_general_ci后缀ci (case insensitive)意味不区分大小写(大小写不敏感)&#x…