美文网首页
简单理解JS中的原型链,原型,构造之间的关系

简单理解JS中的原型链,原型,构造之间的关系

作者: 水漫门廷 | 来源:发表于2021-01-19 22:27 被阅读0次

前言

以前觉得原型,原型链,构造就是后端的继承,后来发现这种想法是十分粗陋的,所以这次打算好好梳理下他们三者的关系。

首先我们先名词解释下:

1.原型(对象原型):

# 每个函数都有对象原型(prototype)
let tiger= function (kind, color ) {
  this.kind= kind;  
  this.color = color ;
};
# 实例对象是没prototype的
let oneTiger = new tiger("东北虎",  "白色");
# undefined
oneTiger.prototype;
#函数是有的,{constructor: ƒ}
tiger.prototype
#继承顶级function年龄属性
Function.prototype.age = 26;
# undefined
tiger.age;
#继承顶级对象出生属性
Object.prototype.birth = 1993;
oneTiger.birth;

从上面的可以看出,定义在函数上的属性实例化后就没了;对象则一直存在。这边就涉及到一个难点了,函数属性到底干啥了?

2.构造(constructor):
后端可能一眼就看出来了,这个是类的构造函数,在js里最初没有类,所以这边我们叫他构造器(等于后端的构造函数)。这个构造器专门为function而设计的,这个构造器指向function的引用。

   function Person() {
       
    }
    var p = new Person()
    console.log(Person.prototype); // Object{} 
    console.log(p.prototype); // undifined
    console.log(p.constructor); //function Person(){}    
    此处的p是通过 Person函数构造出来的,所以p的constructor属性指向Person
    console.log(Person.constructor); //function Function(){}
    之前提过,每个函数其实是通过new Function()构造的
    console.log({}.constructor); // function Object(){}
    每个对象都是通过new Object()构造的
    console.log(Object.constructor); // function Function() {}
    Object也是一个函数,它是Function()构造的
    console.log([].constructor);  //function Array(){}

从上面可以看出,对象也是函数创建的!

3.原型链(继承)
实例对象与原型之间的连接(继承),就叫原型链(原型继承)。proto(隐式连接)
proto是个内置属性,指向了它的构造函数原型。这句话什么意思?

# 执行下这个就能发现,
tiger.__proto__ === Object.prototype;

总结

在对象原型上定义属性,构造器指向函数的引用(多用于修正原型指向),最后通过原型链隐式将他们串了起来。简单的将就是可以通过在prototype上定义公共属性给实例函数使用,与后端继承十分相似。

相关文章

  • 简单理解JS中的原型链,原型,构造之间的关系

    前言 以前觉得原型,原型链,构造就是后端的继承,后来发现这种想法是十分粗陋的,所以这次打算好好梳理下他们三者的关系...

  • 2018-01-09 关于javascript原型链的思考 pl

    s 深入理解原型和原型链? 构造函数 理解原型和原型链 new的时候js都干了什么? 一个实现继承的demo 构造...

  • js 原型 2019-12-15

    原型:constructor 构造函数、实例、原型对象三者之间的关系 原型链 原型对象中的this指向 扩展内置对...

  • JavaScript高级程序设计学习笔记之继承模式

    原型链 JavaScript的继承主要依靠原型链来实现的。我们知道,构造函数,原型,和实例之间的关系:每个构造函数...

  • 原型和原型链的简单理解

    原型 在JS中原型就是prototype对象,用来表示类型之间的关系。 原型链 JS中对象和对象之间是有联系的,通...

  • JavaScript 常用继承方式

    JavaScript 常用继承方式 原型链继承构造函数,原型,实例之间的关系:每个构造函数之间都有一个原型对象,原...

  • 原型链的理解

    在理解原型链之前,首先要知道构造函数、实例、原型三者是什么,以及之间的关系。 构造函数 function Pers...

  • 理解js中是原型链? 如何实现继承?

    怎么理解js中是原型链? 如何实现继承? 1.每个构造函数都有一个原型对象 2.每个原型对象都包含一个指向构造函数...

  • js继承完全理解

    认识原型链 要理解js的继承原来要先理解原型链,要理解原型链要先清楚下面两个结论: 任何一个构造函数(其实是任何一...

  • 深入浅析js原型链和vue构造函数

    一、什么是原型链?简单回顾下构造函数,原型和实例的关系: 每个构造函数(constructor)都有一个原型对象(...

网友评论

      本文标题:简单理解JS中的原型链,原型,构造之间的关系

      本文链接:https://www.haomeiwen.com/subject/lavczktx.html