Start from scratch Web JS Advanced (ii) prototype chain, prototype inheritance

Tag: Represents a function declaration instance img Contact attribute is space Front end learning

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

First, the prototype chain

The prototype chain represents a relationship between the instance object and the prototype object, which is connected by a __proto__ prototype.

1, the prototype of the direction of change

The prototype of the instance object points to the __proto__ prototype object in the constructor of the object prototype, and if the object's constructor prototype points to a change, the pointer to the prototype in the instance object __proto__ changes.

For example:

Person.prototype = new Cat();

Because person.prototype = {}; can be an object, it is possible to pass in an instance function of another object, when the instance object of person can access the properties and methods in the Cat prototype prototype, and no longer access the properties and Method.

2, the final point of the prototype chain

The instance object __proto__ points to the prototype object of the constructor prototype, because prototype is also an object, so there __proto__ is, this __proto__ point is the object of the prototype, and object prototype inside the c4/> points to null.

Example:

function Person() {}    var per = new Person();    console.log(per.__proto__ === Person.prototype); // true    console.log(Person.prototype.__proto__ === Object.prototype); // true    console.log(Object.prototype.__proto__); // null

Prototype chain diagram:

3, the prototype point to change after the addition of prototype method

First look at a case: Ask the following procedure is there a problem?

function Person() {}Person.prototype.eat = function () {};function Student() {}Student.prototype.say = function () {};Student.prototype = new Person();var stu = new  Student();stu.say();

Answer: Stu.say (); Will error. Because Student's prototype points to an instance object of person, the person's instance object clock does not have a say method, so an error is made.

Workaround: Add the prototype method after the prototype points to the change.

function Person() {}Person.prototype.eat = function () {};function Student() {}Student.prototype = new Person();Student.prototype.say = function () {};var stu = new  Student();stu.say();

PS: This time will not be error, Student added the location of the prototype method is an anonymous person instance object, here is a person's instance object, not all, so when you new a person's instance object, there will be no say method.

4, instance object and prototype object property name problem

When an instance object accesses a property, it is looked up from the instance object, found in direct use, cannot be found in the pointed prototype object, found in use, or cannot be found, or undefined.

How do I change the value of a property in a prototype object? How to change the value of the assignment.

If you use 对象.属性 = 值 the method to assign a value, if the attribute is in the instance object, the value of the property in the instance object is changed, and if there is no such attribute in the instance object, then this modification is equivalent to adding an attribute to the instance object, and the value of the corresponding property in the prototype object pointed to is not changed.

Second, the inheritance of the prototype 1, the inheritance of the prototype

Second function of the prototype: inheritance. The purpose is also to save memory space.

Inheritance can be implemented by changing the sub-class prototype to an instance object that is directed to the parent class.

Case:

 // 父类：人function Person(name, age) {        this.name= name;        this.age=age;    }    Person.prototype.eat = function () {        console.log("eat()");    };    // 子类：学生    function Student(sex) {        this.sex=sex;    }    // 子类继承父类只需要改变子类原型的指向到父类的实例对象。    Student.prototype = new Person("Daotin", 18);     Student.prototype.study = function () {        console.log("study()");    };    var stu = new Student("male");    console.log(stu.name); // Daotin    console.log(stu.age); // 18    stu.eat(); // eat()

Bug 1: When you change the orientation of a subclass prototype object, the property is fixed at initialization time, and the value of each subclass instance object is fixed.

workaround : You do not need to refer to the instance object of the child class prototype to the parent class, only the constructor of the parent class is borrowed.

    function Person(name, age) {        this.name = name;        this.age = age;    }    Person.prototype.eat = function () {        console.log("eat()");    };    function Student(name, age, sex) {        Person.call(this, name, age);        this.sex = sex;    }    //Student.prototype = new Person("Daotin", 18);    Student.prototype.study = function () {        console.log("study()");    };    var stu = new Student("Daotin", 18, "male");    console.log(stu.name);    console.log(stu.age);    console.log(stu.sex);    stu.eat(); // 不能访问

Person.call(this, name, age);The first parameter, this, represents the current object, which means that the current object calls the person, passes the name and age, and, specifically, how much I specify. Such a different subclass, through which you can set different properties.

Flaw 2: stu.eat(); inaccessible, that is, the parent prototype method cannot inherit.

workaround : Combine Inheritance (prototype mode inheritance + borrowing constructor inheritance)

    function Person(name, age) {        this.name = name;        this.age = age;    }    Person.prototype.eat = function () {        console.log("eat()");    };    function Student(name, age, sex) {        Person.call(this, name, age); // 借用父类构造函数，实现父类属性的继承        this.sex = sex;    }    Student.prototype = new Person(); // 不传参数了，实现原型方法的继承    Student.prototype.study = function () {        console.log("study()");    };    var stu = new Student("Daotin", 18, "male");    console.log(stu.name);    console.log(stu.age);    console.log(stu.sex);    stu.eat();    stu.study();

Student.prototype = new Person();Does not pass parameters, the implementation of the prototype method of inheritance.

Person.call(this, name, age);The parent class constructor is borrowed to implement the inheritance of the parent class property.

2. Copy Inheritance

is to copy the properties and methods that need to be shared in the object directly to the other object in the same way.

    function Person(name, age) {        this.name = name;        this.age = age;    }    Person.prototype.eat = function () {        console.log("eat()");    };    var per = {};    // 循环拷贝    for(var key in Person.prototype) {        per[key] = Person.prototype[key];    }    console.log(per);

Three, review 1, function of the Declaration and the difference between the function expression

// 函数的声明    if(true) {        function f1() {            console.log("f1()--1");        }    } else {        function f1() {            console.log("f1()--2");        }    }    f1();

function declaration if placed inside if-else-, Chrome and Firefox output F1 ()--1,ie8 output F1 ()--2, because the function declaration will be in advance, the second one will overwrite the first.

// 函数表达式    var func;    if(true) {        func = function () {            console.log("f1()--1");        };    } else {        func = function () {            console.log("f1()--2");        };    }    func();

function expressions, the output is F1 ()--1. So use function expressions as much as possible.

2. Strict mode

function func() {  

Under normal circumstances, the evidence is correct.

"use strict";function func() {  console.log(this) // window}window.func(); // 严格模式下必须加 window，因为他认为函数是一个方法，方法必须通过对象来调用的。

2.1, the function is also an object, the object is not necessarily a function (for example: Math).

As long as there __proto__ is the object;

Only prototype the function is needed because the function will call the prototype property.

The object is not necessarily a function: for example, Math, __proto__ but not prototype .

2.2. All functions are instance objects created by the function constructor.

Since the function is an object, what is the constructor created?

var f1 = new Function("a", "b", "return a+b");f1(1,2);// 上面相当于：函数的声明function f1(a, b) {  return a+b;}f1(1,2);// 相当于：函数表达式var f1 = function (a, b) {  return a+b;}f1(1,2);

So what's a Function thing?

Is the object also a function of view? It then looks at the __proto__ prototype object that points to object. All objects point to a prototype object of object.

Start from scratch Web JS Advanced (ii) prototype chain, prototype inheritance