前端知识重难点剖析之原型 1~5问

132 阅读5分钟

文章会围绕一个重难点不断的提问,有些问题可能会问的很简单,有些会有一些深度,目标只有一个,彻底搞懂知识点,地毯式提问扫盲,看不懂没关系,问题会反反复复地问,看多了自然懂了

1.什么是原型?

网络上有很多解释,我先列出来,大家看看有个印象

  • 解释1:

在 JavaScript 中是使用构造函数来新建一个对象的,每一个构造函

数的内部都有一个 prototype 属性,它的属性值是一个对象,这个

对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用

构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个

指针指向构造函数的 prototype 属性对应的值,在 ES5 中这个指针

被称为对象的原型。

  • 解释2:

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个”[[Prototype]]”内部属性,这个属性所对应的就是该对象的原型。

  • 解释3:

函数有原型,函数有一个属性叫prototype,函数的这个原型指向一个对象,这个对象叫原型对象。这个原型对象有一个constructor属性,指向这个函数本身。

  • 解释4:

Javascript规定,每一个函数都有一个prototype对象属性,指向另一个对象(原型链上面的)。
prototype(对象属性)的所有属性和方法,都会被构造函数的实例继承。这意味着,我们可以把那些不变(公用)的属性和方法,直接定义在prototype对象属性上。

prototype就是调用构造函数所创建的那个实例对象的原型(proto)。

prototype可以让所有对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中定义对象信息,而是可以直接将这些信息添加到原型中。

  • 解释5:

在javaScript中,每当定义一个数据类型(如函数,对象)的时候,都会随之创建一个prototype属性,这个属性指向函数的原型对象
当一个函数通过new这个关键字调用时,这个函数就是一个构造函数,返回一个全新实例对象,这个实例对象有个proto属性指向这个构造函数的原型对象

总结:原型就是对象或者函数定义的时候所自带prototype属性,而它指向这个函数或者对象的原型对象

2.与原型有关的属性有哪些?

  • prototype属性 :
    prototype 存在于构造函数中 (其实任意函数中都有,只是不是构造函数的时候prototype我们不关注而已) ,他指向了这个构造函数的原型对象。 
  •  constructor属性 :
    constructor属性存在于原型对象中,他指向了构造函数
  • __proto__ **属性(注意:左右各是2个下划线)
    **      用构造方法创建一个新的对象之后,这个对象中默认会有一个属性__proto__, 这个属性就指向了构造方法的原型对象。

3.在 JavaScript 中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性。根据这句话,提出疑问:如何使用构造函数新建一个对象?

function Person(first, last, age, eyecolor) { //这是构造函数,约定函数名首字母大写
 this.firstName = first;  
 this.lastName = last;
 this.age = age;
 this.eyeColor = eyecolor;
}  
var myFather = new Person("John", "Doe", 50, "blue"); // 这是使用构造函数来新建一个对象
var myMother = new Person("Sally", "Rally", 48, "green");

4.在 JavaScript 中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性。根据这句话,提出疑问:如何理解在 JavaScript 中是使用构造函数来新建一个对象的, 是指只有构造函数新建的对象才有prototype 属性吗?

不是,实际上创建对象有5种方式,创建出来的对象都有prototype 属性,可以复制下面代码在浏览器控制台执行一下

let a = {} console.log(a)  //展开打印出来的对象可以看到有个[[Prototype]]属性

创建对象参考文章:

js中创建对象的5种方法_Jiang_JY的博客-CSDN博客_js 新增对象

5.(了解)在 JavaScript 中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性。根据这句话,提出疑问:所有对象都有prototype 属性吗?

JavaScript内置的构造器有以下几个: 

Object,Number,Boolean,

String,Array,RegExp,

Date,Function,

Error,Math,JSON等, 其中Math和JSON是以对象形式存在的,无需new便可创建。

当我们用 var mm=new Math(1234565);的时候,会报错。

 Object,Number,Boolean,

String,Array,RegExp,

Date,Function,Error的原型是Function.prototype。

而Math和JSON对象的原型是Object.prototype。 

 也就是说,Javascript中,只有上述的对象有prototype属性,其它的通过这些构造器创建的对象,都没有这个属性。 

1、 he 是 Human的一个实例化对象 ( typeof he = “object” ),但是不是一个函数,所以没有prototype;

Human是Function的一个实例,而Function是一个函数,他的实例Human也是一个函数 ( typeof Human = “function” ),所以他们都有prototype。

此外Object Array RegExp等也是函数。Math就仅仅是一个new Object() ,不是函数。

 2、构造函数的prototype,默认情况下就是一个new Object()还额外添加了一个constructor属性。所以说默认是没有prototype只有__proto__的。