JavaScript-什么是原型,什么是原型链
在讲述原型与原型链之前,我们先补充一些JavaScript的基础概念
- 对象:是属性和方法的集合也是类的实例
- 类:是对象的抽象
- 实例:就是一个类的真实对象。比如我们都是“人”,你和我都是“人”类的实例了。而实例化就是创建对象的过程,用New关键字创建。(引用于 什么是实例)
创建对象的两种方式:
a.字面量形式:
var k = {}
b. 通过new 运算符:
var obj = new Object()
什么是构造函数?
- 用来构造和创建对象的函数
- 声明时与普通函数并无区别
- 用 new 运算符加上函数的调用,返回的就是一个对象
- 构造函数中的This 指的是 即将要 new 的那个对象
说了这么多,我们现在开始讲述原型与原型链的概念吧~
原型:原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个”Prototype”内部属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型,所有实例共享的属性和方法。
在Js中万物皆为对象,因此原型也是对象,可以通过原型实现对象属性的继承
下面我们开始讲述案列:
function Flower(name) {
this.name = name;
console.log("FlowerName->", name); // liLy
}
// 在Flower的原型上新增一个say方法,Flower的每一个实例都能访问这里的唯一的一个say方法
Flower.prototype.hi = function () {
console.log(this.name); // liLy
};
var tom = new Flower("liLy");
console.log(tom); // 见下方截图
可见我在上方用 new 的方式创建了一个构造函数,并且在Flower的原型中增加了一个 hi 函数,这就是我们上面多说的实现实例共享的属性和方法,有一点得记住,所有数据对象中都会带有一个prototype(原型)
再补充下:这里的hi函数,它也就是Flower的实例
“prototype”和“proto”介绍(引用于 https://www.jb51.net/article/80109.htm):
对于所有的对象,都有__proto__属性,这个属性对应该对象的原型.
对于函数对象,除了__proto__属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的__proto__属性)
实例的_proto_指向构造函数的prototype
从以下例子可以看出 tom 为 实例,Flower 为 构造函数
function Flower(name) {
this.name = name;
console.log("FlowerName->", name); // liLy
}
// 在Flower的原型上新增一个say方法,Flower的每一个实例都能访问这里的唯一的一个say方法
Flower.prototype.hi = function () {
console.log(this.name); // liLy
};
var tom = new Flower("liLy");
// 上面我们说过,函数的prototype属性值将被作为原型赋值给所有对象实例(也就是__proto__),所以我们在tom 与Flower __proto__原型中都能调用到hi这个函数
console.log(tom.__proto__ === Flower.prototype); // true
最后我们概述下什么是原型链:
每个数据对象中都有原型,原型中也有原型,对象的原型指向原型对象,也就是这样一层层的指向链接起来就是一条原型链
大家可能会有一个疑问既然说原型中也有原型,那么指向最顶层的原型对象是谁呢,答案就是Object.prototype
Object.prototype 的 prototype为null,因为它已经为最顶层的原型
有些需要留意的细节:
- 只有函数拥有prototype 与 proto,其他数据类型对象只拥有_proto_
var a = 1
console.log(a.__proto__,a.prototype);
以上是K对原型与原型链的刨析,有问题的地方或者想让K继续概述的地方请大家在评论区指出,谢谢大家的支持🧑🏼💻🤯🫡