Problems with prototype chain inheritance

question: Function A () {this.fn} what if B. prototype = new A () prototype chain inherits, it will pollute the variable space of B, for example, there is fn in B?

Front-end
Mar.24,2021

there is no pollution, except that the object b created by constructor B has the attribute fn, and its prototype chain also has the fn attribute.

at this time, the b.fn accesses the fn property of the b object itself, and the fn property of the parent object can be accessed using b.__proto__.fn

.

to determine whether the method or value exists in B, it will look it up step by step according to its prototype chain and return the nearest one.

such as

    The prototype of
  • A containing fn,B points to Aline B and there is also fn
    so B.fn gets the fn of B
    • .
  • A's prototype containing fn,B points to A code B without fn
    , so B.fn actually gets A's fn
    • .
  • A has no fn, but A's prototype has, B's prototype points to A code B without fn
    , then B.fn actually gets the fn of A's prototype
    • .
  • An and prototype without fn,B point to A code B without fn
    then B.fn will consistently trace back to null, and return undefined

I also came across such topic during the interview at that time. Please refer to

.

after creating the example of B in new (assuming b), calling b.fn uses the this.fn defined by B instead of the this.fn defined by A. Continue to look for prototype objects only if they do not exist in B 

function B() {
  this.fn = function() {
    console.log('B fn');
  }
}
function A() {
  this.fn = function() {
    console.log('A fn');
  }
  this.fn1 = function() {
    console.log('A fn1');
  }
}
B.prototype = new A();
var b = new B();
b.fn();
b.fn1();

// 
b fn
a fn1

if you can't find it in your scope, you will follow the prototype chain. It doesn't matter if you have the same name. Use whoever you find first

.

Previous: Enter a custom function on the front-end page and save the data to the database. Next time, by requesting the background, get the custom function list, and how to execute the function list directly after getting it.

Next: A workaround for warnings in the Redirect component in react-router?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu