Archetypal model

function Person(){
}
Person.prototype.name="Ewarm";
Person.prototype.age="29";
Person.prototype.job="software Engineer";
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person()
// We can go through isPrototypeOf() Method to determine whether this relationship exists between objects , The instance .__proto__ Whether to point to the prototype object of the constructor , If it points to, the method returns as ture.
alert(Person.prototype.isPrototypeOf(person1))//true
//ECMAScript5 A new method has been added Object.getPrototypeOf() This method returns an instance .__proto__ Value , The constructor prototype object alert(Object.getPrototypeOf(person1)==Person.prototype)//true Return instance .__proto__ Value
alert(Object.getPrototypeOf(person1).name) //Ewarm

// If you are careful, you will find that every time Person.prototype. Attributes are really troublesome, so we have the following

  Simpler prototype syntax

function Person(){
}
Person.prototype={
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
} }
// Note that the final result here is the same as before But here constructor Property no longer points to Person 了 reason : Every time you build a function , It will be created at the same time prototype object , This object will also automatically get constructor attribute , At this point through constructor The object type cannot be determined
var person=new Person()
alert(person instanceof Object )//ture
alert(person instanceof Person)//ture
alert(person.constructor==Person)//false
alert(person.constructor==Object)//true

// But we can fix it in the following ways constructor

function(){
}
Person.prototype={
constructor:Person,// It's like copying
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
}
}

// This is fixed, but ,constructor Of enmurable The attribute changes to true You can enumerate If you want to set it back have access to Object.defineProperty(), Only applicable to ECMAScript5 Compatible browser

The dynamics of prototypes

function Person(){
}
var person=new Person()
Person.prototype={
constructor:Person,// It's like copying
name:"Ewarm",
age:25,
job:"software engineer",
sayName:function(){
alert(this.name)
}
}
person.sayName()//error

// Reasons for reporting errors : Rewriting a prototype object cuts off the connection between an existing prototype and any previously existing instance , They're still quoting the original prototype

function Person(){}
var person1=new Person()
Person.prototype.sayHi=function(){
alert("hi")
}
person1.sayHi()//hi
// This is equivalent to adding methods instead of rewriting

  Add methods to native objects

String.prototype.Ewarm=function(text){
return this.indexOf(text)==0// Find as 0
}
var message="hello Ewarm"
alert(message.Ewarm("hello"))//true

  The prototype problem
// The problem of sharing Especially for properties that reference type values

function Person(){}
Person.prototype={
constructor:Person,
name:"Ewarm",
age:25,
job:"software engineer",
friends:["cch","emon"],
sayName:function(){
alert(this.name)
}
}
var person1=new Person()
var person2=new Person()
person1.friends.push("tea")
alert(person1.friends)//"cch","emon","tea"
alert(person2.friends)//"cch","emon","tea"
alert(person1.friends==person2.friends)//true
// A combination of constructor pattern and prototype pattern can solve this problem

If you don't understand I suggest you knock it one by one ~ It's easier to understand

JavaScript More articles on object-oriented in-depth understanding of prototypes

  1. JavaScript Object oriented understanding

    JavaScript Object oriented understanding   Note links : http://pan.baidu.com/s/1c0hivuS 1:JavaScript There are two kinds of objects , Function objects and normal objects new Function() ...

  2. javascript javascript Object oriented understanding and simple examples

    javascript Object oriented understanding and simple examples zero . The point of this section : 1. encapsulation : 2. Inherit : one . Let's understand : One . javascript Object oriented concept : To illustrate JavaScript It's a thorough object-oriented ...

  3. javascript Object oriented understanding ( One )

    For the first time in the garden : About js Object oriented understanding : What is the factory way ? What is a constructor ? Prototype chain ? References to objects ? 1. What is the object ? stay js More contact is the object , such as : var arr = []; arr.num ...

  4. javascript object-oriented new keyword Prototype chain Constructors

    JavaScript object-oriented JavaScript Language uses constructors (constructor) Template as object . So-called " Constructors ", It's a function used to generate instance objects . It's the template of the object , describe ...

  5. JavaScript object-oriented Examples and prototypes

    JavaScript object-oriented and C# Not quite the same. ,js The object of is inherited from the prototype as follows : First create a js example new  function function f () {} This function Will inherit Func ...

  6. javascript Object oriented personal understanding

    1. javascript Object oriented features : Abstraction , encapsulation , inheritance : 2. js Objects in the : Set of key value pairs : for instance {key:value} 3. Abstraction : Describe a data with an object , You need to extract the core data of this object : Two must ...

  7. javascript Object oriented inheritance and prototyping

    One . Understand what objects are : Anything can be an object , An object is a collection of unordered attributes Object has properties and methods 1.1 There are two kinds of properties inside the type property of the property : Data properties and accessor properties (1) Data attribute : Yes 4 A descriptive behavior Config ...

  8. JavaScript object-oriented programming · Understand the object

    Preface :       Before we go deep into Before object-oriented programming , Let's first understand Javascript Of object (Object), We can ECMAScript Think of the object as a hash table , Its value is nothing more than a set of name value pairs , Where the value can be data ...

  9. javaScript Deep understanding of the prototype chain

    After reading books for many times, I finally have a new understanding of the application of prototype chain in actual code , But I don't know if there are any mistakes , Please give me more advice . Constructors . Relationship between prototype and instance : Each constructor has a prototype object funName.prototype ...

Random recommendation

  1. XE2 Generic exercises 1

    To reference units  System.Generics.Collections implementation {$R *.dfm}var i: Integer; str: string; procedure TF ...

  2. jquery Realization TODOList

    html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. PIC18F Interrupt timer

    // be based on MCC18 compiler , Use HI-PICC Unavailable //-------------------------------------------- #include <p18F452.h> ...

  4. turn :Google The third part of the thesis ----MapReduce

    The article comes from :http://www.cnblogs.com/geekma/p/3139823.html MapReduce: Simple data processing on large clusters Abstract MapReduce It's a design model , It's also a process ...

  5. PHP unicode The mutual conversion with ordinary string

    unicode Turn the string Method 1 :json /** * unicode Turn the string , adopt json conversion * @param $str * @return string */ function unicode_d ...

  6. C# SQLite Database operation

    C# SQLite  Database operation learning Running environment :Window7 64bit,.NetFramework4.61,C# 7.0 Reference resources : SQLite Official website SQL As Understood By SQL ...

  7. eclipse Extra special symbols appear at the beginning and end of each line of code

    window -> preferences -> general -> editors -> text editors ->          show whitespa ...

  8. background-image,background-repeat, background-position Like images ( Multiple uses of a picture )

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【vue】index.html main.js app.vue index.js How to combine ? How to pack it ? Information collected

    Reprint :https://blog.csdn.net/yudiandemingzi/article/details/80247137 How to combine : One . Start project First step :cmd Enter the project file , function npm ...

  10. pdflush Process introduction and optimization 【 turn 】

    Reprinted address : http://blog.ops88.com/2012/07/12/74 One . /proc/sys/vm/dirty_background_ratio   This parameter is trying a write ba ...