JavaScript Refined Constructor Constructor and Constructor Properties Detailed Explanation_Javascript Skills

In addition to creating objects, the constructor also does another useful thing - automatically sets the prototype object for the new object created. The prototype object is stored in the ConstructorFunction.prototype property.

For example, if we rewrite the previous example and use the constructor to create objects "b" and "c", then object "a" plays the role of "Foo.prototype":

// 构造函数
function Foo(y) {
 // 构造函数将会以特定模式创建对象：被创建的对象都会有"y"属性
 this.y = y;
}
// "Foo.prototype"存放了新建对象的原型引用
// 所以我们可以将之用于定义继承和共享属性或方法
// 所以，和上例一样，我们有了如下代码：
// 继承属性"x"
Foo.prototype.x = ;
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
// 使用foo模式创建 "b" and "c"
var b = new Foo();
var c = new Foo();
// 调用继承的方法
b.calculate(); // 
c.calculate(); // 
// 让我们看看是否使用了预期的属性
console.log(
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 // "Foo.prototype"自动创建了一个特殊的属性"constructor"
 // 指向a的构造函数本身
 // 实例"b"和"c"可以通过授权找到它并用以检测自己的构造函数
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
);

The above code can be expressed as the following relationship:

The relationship between constructor and object

As can be seen from the above diagram, each object has a prototype. The constructor Foo also has its own __proto__, which is Function.prototype, and the __proto__ of Function.prototype points to Object.prototype. Let me reiterate. , Foo.prototype is just an explicit attribute, that is, the __proto__ attribute of b and c.

A complete and detailed explanation of this question has two parts:

Object-oriented programming. The general theory (OOP. The general theory) describes different object-oriented paradigms and stylistics (OOP paradigms and stylistics), as well as comparison with ECMAScript.

Object-oriented programming. ECMAScript implementation (OOP. ECMAScript implementation), specifically talks about object-oriented programming in ECMAScript.
Now that we have understood the basic object principles, let's take a look at the program execution environment [runtime program execution] in ECMAScript. This is commonly called the "execution context stack" [execution context stack]. Each element can be understood abstractly as an object. You may have discovered that, yes, in ECMAScript, you can see objects almost everywhere.

The following is a detailed explanation of JavaScript constructor properties

The constructor attribute of an object is used to return the function that created the object, which is what we often call the constructor.

In JavaScript, every object with a prototype automatically gets the constructor attribute. Except for some special objects such as arguments, Enumerator, Error, Global, Math, RegExp, Regular Expression, etc., all other JavaScript built-in objects have the constructor attribute. For example: Array, Boolean, Date, Function, Number, Object, String, etc. All major browsers support this attribute.

Grammar

object.constructor

Return value

The constructor property of an object returns a reference to the function that created the object.

Examples & Instructions

[native code] in the following code indicates that this is the underlying internal code implementation of JavaScript, and code details cannot be displayed.

// 字符串：String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true
// 数组：Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true
// 数字：Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true
// 自定义对象：Person()
function Person(){
  this.name = "CodePlayer";
}
var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true
// JSON对象：Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true
// 自定义函数：Function()
function foo(){
  alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true
// 函数的原型：bar()
function bar(){
  alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true