[JS foundation] Prototype and prototype chain, constructor

5 prototype rules

  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

Tags: Javascript Attribute

Posted on Wed, 04 Dec 2019 06:06:47 -0500 by Fabis94