一篇文章读懂JS原型和原型链
xsobi 2025-01-14 18:21 1 浏览
前言
你好! 欢迎阅读本篇文章,今天我将要用一篇文章带你深入理解JavaScript中的原型和原型链,让我们一起揭开原型神秘的面试,一起窥探其中的奥妙。
一切皆是对象
看到这个标题你可能就有你可能就有疑问了,怎么这篇文章一开始就要胡扯了,然后准备要关闭这篇这篇文章。别急、客官,接下来就让我们仔细掰扯掰扯这句话
“一切皆是对象”是没错,关键在于你如何理解这个“对象”这个概念。这句话的重点也在于此。
在理解对象之前,我们先引用一个我们的老朋友 typeof ,相信很多前端的同学都应该知道这个JavaScript的常用运算符,如果你不知道,请仔细阅读下面文字。
我们都知道 typeof 可以判断一个变量的类型,返回值共有一下几种( undefined、number、string、boolean、function、object、Symbol )其中 Symbol 是 ES6 引入的新类型。
function test() {
var x;
console.log(typeof x) //undefined
console.log(typeof 100) //number
console.log(typeof 'typeof') //string
console.log(typeof true) //boolean
console.log(typeof [1,2,3,4]) //object
console.log(typeof {a:1,b:2}) //object
console.log(typeof null) //object null在这里为空对象(注意)
console.log(typeof new Number(100)) //object
console.log(typeof function(){}) //function
}
上面代码列出的是 typeof 返回的几种值,其中代码前四种是值类型,余下的几种情况都是引用类型,他们也都是对象。关于引用类型和值类型的区别请看我们另一篇文章值类型和引用类型.
对象是若干属性的集合,对象里面的一切都是属性,都是以键值对的形式出现,其中方法也是一种特殊的属性。属性的值也能是一个对象(禁止套娃qAq)对象可以用instanceof判断,记住一切(应用类型)都是对象,对象是属性的集合,一切对象都是通过函数来创建的
原型知多少
说到原型我们就不得不说 prototype 我们知道每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。我放了两张图片帮你理解(qwq)
上图SuperType是函数,他的原型就是SuperType Prototype,原型的constructor属性指向它的构造函数SuperType。
上图是对象的Object的以及它的原型,我们可以看到原型上有很多我们常用的属性和方法,应为一切对象的原型都直接或间接的指向了它,因此可以使用上面的方法。
上面说到每一个函数都有自己的prototype,也就是原型,那么通过 new 生成的函数实例呢?这里就不禁要疑问了,其实每个new出来的实例,以及每一个对象都有一个__proto__,即隐式原型。
上面图片显示了对象obj的__proto__属性,下面我再放一张Object的prototype。
从上面的截图看出,obj.proto__和Object.prototype是一样的
我们用一张图表示。
从图中我们得知每个对象都有都有一个__proto,并且指向该对象函数的prototype。
唯一的特例Object.prototype的__proto__指向的是null
还有就是,函数也是对象,函数也有一个__proto__,指向Function.prototype,函数是由Function创建出来的,而Function又被自身创建。
var foo = new Function("x","y","return x+y")
就是这样,建议不要这样创建函数
原型链和继承
下面用一张详细的图,请仔细阅读,我们根据这张图讲解原型链
要说起原型链,我们不得不用到一个工具instanceof,对于引用类型,我们想要知道引用类型的具体是数组还是对象,就要用到这个工具。如下所示
function Foo(){}
var f1 = new Foo()
console.log(foo instanceof Foo) //true
console.log(foo instanceof Object) //true
结合上图我们我们来看看,instanceof运算符的规则就是,实例foo沿着__proto__这条线,同时Foo沿着prototype这条线来找,如果这两条线找到了同一个对象,那么就返回true,否则就返回false, instanceof表示一种继承关系,或者原型链的结构
JavaScript是通过原型链的方式来实现继承的,又被称作为原型链对象继承,对于一个对象,它可以访问它原型对象的属性。同理,原型对象也是一个属性,它也有自己的原型,因此也可以继承它原型对象原型的属性。
访问一个对象的属性时,现在基本的对象内找,如果找不到,就沿着__proto__这条链向上找。
几种常见的继承方式
组合继承
组合继承(combination inheritance),有时候也叫做伪经典继承,指的是将原型链和借用构造函数的
技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方
法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数
复用,又能够保证每个实例都有它自己的属性。下面来看一个例子
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
ES6中继承
ES6是通过class实现了类,通过extends实现了标准化继承,然而,class、extends本质上还是语法糖,通过bable可以将其转译为ES5代码执行。
ES6中的class、extends使用的是ES5中寄生组合继承,并对寄生组合继承作出了一下优化,如下所示
ES6中继承使用Object.create()以SuperClass的原型对象创建了一个新的原型对象,即SubClass.prototype.proto = SuperClass.prototype。 同时使其constructor属性指向SubClass。
ES5的继承是子类的原型对象__proto__属性指向父类的原型对象,而ES6中继承是子类__proto__指向父类。
写在最后
以上就是本人对原型和原型链的整理和记录,因为资料来源比较多,在整理和书写是难免出现错误,如果你看到这里,发现原文有错误的地方,或者有什么想要分享的,也欢迎在评论区留言,一起学习,加油,奥利给
相关推荐
- IWSC施行新一轮性能平衡变动 保时捷动力得到提升
-
在下周末IWSC美洲赛道(COTA)站的比赛开始前,IMSA又对赛事内多个组别的赛车进行了性能平衡(BoP)调整,其中GTD组别的保时捷911GT3R获得了动力上的提升。IMSA在本周四确定了最新...
- 22个超详细的 JS 数组方法
-
作者:Yushiahttps://juejin.cn/post/6907109642917117965...
- 10 个常问的 JS 面试题
-
作者:JoanneLee-(Vivi)译者:前端小智来源:medium1.如何理解JS中的`this`关键字?JS初学者总是对this关键字感到困惑,因为与其他现代编程语言相比,JS中...
- 一文理解js原型和原型链是什么以及作用
-
js三座大山,这是第二座山,今天来和大家一起翻山越岭。阅读前请记住这句话js里万物皆对象。js原型、原型链一镜到底开始:1、知道什么是原型和原型链首先请想下你平常写代码数组的常用方法有哪几个,答:ma...
- JS 类型检测:谈 typeof 和 instanceof 的缺陷与优化
-
在javascript中,typeof和instanceof是用来判断数据类型比较通用的两个方法,但这两种方式并不能完全解决实际中遇到的问题。因此,这篇文章的目的是通过对这两个方法介绍来分析其存...
- Js中的new操作符起到什么作用?
-
Js是当今时代最常用的代码操作语言,其中new操作符尤为常见。对于很多代码小白来说,并不清楚new在Js中扮演着怎样的角色,具体是做什么用,干了什么。本文从new操作符的作用着手,简单介绍new操作符...
- 深入理解 JS 原型链
-
JS中的原型链在面试中可以说是“必考题”日常开发不常遇到,而且在ES6之后,原型链就更少见了...
- 一篇文章读懂JS原型和原型链
-
前言你好!欢迎阅读本篇文章,今天我将要用一篇文章带你深入理解JavaScript中的原型和原型链,让我们一起揭开原型神秘的面试,一起窥探其中的奥妙。一切皆是对象看到这个标题你可能就有你可能就有疑问了...
- 图文解说 javascript中 原型和原型链 构造函数 组合使用方法
-
原型和原型链原型和原型链...
- JS原型、原型链深入理解
-
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。...
- Linux export命令用法
-
export命令是Linux/Unix中常用的命令之一,用于设置环境变量和将变量导出到子进程中。使用格式:export[-fnp][name[=value]]参数说明:-f:表示将函数名也一并传递...
- Windows Unix Linux Android壁纸
-
复仇者联盟壁纸
- 在 Linux/Unix/Mac 下清除 DNS 查询缓存
-
在MS-Windows下,你可以使用ipconfig命令来清除dns缓存。然而,Linux和Unix提供了不同的方法来清除缓存。Linux可以运行nscd或者BIND或者dnsmasq作为...
- 如何在Linux系统安装中文输入法以及使用
-
在安装Linux系统时如果设置默认语言是英文,那么该如何输入中文呢?首先,无论是中文的还是英文的Linux系统,输入法基本都是内置的ibus输入法,如果你不想下载别的输入法,你可以就用ibus的中文输...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- firebug 使用 (31)
- characterencodingfilter (33)
- getmonth (34)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- localhost 8080 (32)
- 多态 (32)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)