[JS foundation] Prototype and prototype chain, constructor

1. All reference types (array, object, function) have object properties, which can freely extend properties (except "null")
2. All reference types (array, object, function) have a "proto" attribute, and the attribute value is a common object
3. All functions have a prototype attribute, and the attribute value is a common object
4. All reference types (array, object, function), "proto" property value points to the prototype property value of its constructor
5. When trying to get a property of an object (reference type), if the object itself does not have this property, it will go to its proto type to find it

var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn () {} fn.a = 100; console.log(obj.__proto__); // Object console.log(arr.__proto__); // Array console.log(fn.__proto__); // ƒ () { [native code] } console.log(fn.prototype); // Object console.log(obj.__proto__ === Object.prototype); // true

How to accurately determine whether a variable is an array type?

var arr = []; arr instanceof Array // true typeof arr // object typeof cannot determine whether it is an array

An example of prototype chain inheritance

function Elem(id) { this.elem = document.getElementById(id); } Elem.prototype.html = function (val) { var elem = this.elem; if (val) { elem.innerHTML = val; return this; // call chaining } else { return elem.innerHTML; } }; Elem.prototype.on = function (type, fn) { var elem = this.elem; elem.addEventListener(type, fn); return this; };

var div1 = new Elem('articleTitle'); console.log(div1.html()); div1.html('<p>hello gril~</p>'); div1.on('click', function () { alert('clicked!'); }); div1.html('<p>hello gril~</p>').on('click', function () { alert('clicked!'); }).html('<p>Nice to meet you.</p>');

Describe the process of a new object

Create a new object
This points to this new object
Execute code, i.e. assign this
Return to this

function Foo (name, age) { // First this becomes an empty object this.name = name; this.age = age; this.class = 'class-1'; // return this; / / this line is available by default } var f = new Foo('li', 20); var f1 = new Foo('wang', 22); // Create multiple objects

Constructor

function Foo (name, age) { this.name = name; } Foo.prototype.getName = function () { console.log(this.name); }; // Create examples var f = new Foo('can'); f.printName = function () { console.log(this.name); }; // test f.printName(); f.getName(); f.toString(); // To find it in F. proto

for (var key in f) { // What we want to loop is the properties of the object itself, not the properties from the prototype // Advanced browsers have blocked properties from prototypes in for in // However, it is recommended to add this judgment to ensure the robustness of the program if (f.hasOwnProperty(key)) { console.log(key); // name printName } }

The method used by instanceof to determine which constructor the reference type belongs to
The judgment logic of f instanceof Foo is: F's "proto" layer by layer, whether it corresponds to Foo.prototype, and then try to judge f instanceof Object

4 December 2019, 06:06 | Views: 5465