菜单

深入分析js中的constructor和prototype

2019年8月4日 - 前端排行

我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new
运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个

 

一、constructor
constructor的值是一个函数。在JavaScript中,除了null和undefined外的类型的值、数组、函数以及对象,都有一个constructor属性,constructor属性的值是这个值、数组、函数或者对象的构造函数。如:

复制代码 代码如下:

在javascript的使用过程中,constructor
和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要。

复制代码 代码如下:

function a(c){
this.b = c;
this.d =function(){
alert(this.b);
}
}
var obj = new a(‘test’);
alert(typeof obj.prototype);//undefine
alert(typeof a.prototype);//object

我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new
运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个

var a = 12, // 数字
    b = ‘str’, // 字符串
    c = false, // 布尔值
    d = [1, ‘d’, function() { return 5; }], // 数组
    e = { name: ‘e’ }, // 对象
    f = function() { return ‘function’; }; // 函数

从上面的例子可以看出函数的prototype
属性又指向了一个对象,这个对象就是prototype对象,请看下图

图片 1

console.log(‘a: ‘, a.constructor); // Number()
console.log(‘b: ‘, b.constructor); // String()
console.log(‘c: ‘, c.constructor); // Boolean()
console.log(‘d: ‘, d.constructor); // Array()
console.log(‘e: ‘, e.constructor); // Object()
console.log(‘f: ‘, f.constructor); // Function()

图片 2

function a(c){
    this.b = c;
    this.d =function(){
        alert(this.b);
    }
}
var obj = new a('test');
alert(typeof obj.prototype);//undefine
alert(typeof a.prototype);//object

以上的构造函数都是JavaScript内置的,我们也可以自定义构造函数,如:

a.prototype 包含了2个属性,一个是constructor
,另外一个是__proto__

图片 3

复制代码 代码如下:

这个constructor  就是我们的构造函数a,这个也很容易理解。

从上面的例子可以看出函数的prototype
属性又指向了一个对象,这个对象就是prototype对象,请看下图

function A(name) {
    this.name = name;
}

那么__proto__ 是什么呢?

图片 4

var a = new A(‘a’);

这个就涉及到了原型链的概念:

a.prototype 包含了2个属性,一个是constructor
,另外一个是__proto__

console.log(a.constructor); // A(name)

  每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性
时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样
一直找下去。

这个constructor  就是我们的构造函数a,这个也很容易理解。

调用构造函数时,需要用new关键字,构造函数返回的是一个对象,看下面的代码就知道了:

请看mozzlia 对它对它的描述

那么__proto__ 是什么呢?

复制代码 代码如下:

When
an object is created, its __proto__ property is set to constructing
function’s prototype property. For
example var fred = new Employee(); will
cause fred.__proto__ = Employee.prototype;.

这个就涉及到了原型链的概念:

var a = 4;
var b = new Number(4);

This
is used at runtime to look up properties which are not declared in the
object directly. E.g. when fred.doSomething() is executed
and fred does not contain adoSomethingfred.__proto__ is checked,
which points to Employee.prototype, which contains a doSomething,
i.e. fred.__proto__.doSomething() is invoked.

  每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性
时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样
一直找下去。

console.log(‘a: ‘, typeof a); // a: number
console.log(‘b: ‘, typeof b); // b: object

Note
that __proto__ is a property of the instances, whereas prototype is
a property of their constructor functions.

请看mozzlia 对它对它的描述

二、 prototype
prototype是函数的一个属性,默认情况下,一个函数的prototype属性的值是一个与函数同名的空对象,匿名函数的prototype属性名为Object。如:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图