In-depth JavaScript object-oriented, JS's prototype chain, inheritance

Source: Internet
Author: User

Advanced Object-Oriented —————————————————————— –

在JS源码中,系统对象也是基于原型的程序,尽量不要去添加和修改系统对象的方法

Packaging Object —————————————————————— –

基本类型都有自己对应的包装对象比如String Number Boolean基本类型会找到对应的包装对象类型,然后包装对象把所有的属性方法给了基本类型,然后包装对象消失例如
        str‘abc‘;        str10;        //创建一个包装对象,给包装对象加num属性,然后立刻消失。        //除非设置String.prototype.num = 10;        alert(str.num);        //这时候又创建了一个包装对象,和上面创建的那个没有关联,        //所以显示undefined

Prototype chain ————————————————————————-

实例对象与原型之间的连接,叫做原型链在ff中的DOM能查看到:__proto__( 隐式连接 )对于一个对象来说,调用其方法或使用其属性,它会先看自己有没有该方法/属性,如果没找到,再通过__proto__向上查找它的原型,直至最顶层的原型ObjectObject对象类型是原型链的最外层    Object.prototype

Some common properties and methods of object-oriented —————————————————

obj.hasOwnProperty(‘name‘) : 查看对象/属性是否是对象本身的。    该方法是 Object.prototype的方法constructor : 查看对象的构造函数    
            var‘‘;            alert(str.constructor===String);//true
    In addition, when a constructor is declared, the system automatically assigns a value to the xxx.prototype.constructor, such as: function person () {} The system automatically adds Person.prototype.    Constructor=person; And this is the only piece of code that is automatically generated by the object-oriented system, but if you use json Person.prototype = {attr1:10, fn1:function () {}} to add to the person    The code that is automatically generated by the system will be overwritten if the attribute/method is added. After the object is instantiated, the object is instantiated. The constructor will find the Object.constructor through the prototype chain (because this constructor does not have this property), and the resulting value is object. When you write a prototype property/method to an object using JSON, write the object C     The Onstruct property, and points to itself for-in when some system comes with an attribute prototype property is not found (you can add the found) avoid modifying the Construtor property instanceof: Whether the object is related to the constructor on the prototype chain    Usage: Person1 instanceof person has a relationship on the prototype chain returns true also can be used to determine whether the object is the specified property var arr = [];    Arr instanceof Array//truetostring (): Converting an object to a string is a method on object the method under the System object is self-bringing, and the object written by itself is found by means of the prototype chain.    ToString of Array object: Returns the string form of the array number object's ToString (n): Returns a numeric n-binary string form using ToString to make a type of judgment (preferably) var arr=[];    Alert (Object.prototype.toString.call (arr));//[object Array];    Object.prototype.toString.call (arr) = = = ' [Object Array] '; To be true is an array to summarize the judging objectThree ways to type: 
        Array;        instanceofArray;        //以上两个在跨iframe,判断window.frames[i].Array;时不行        Object‘[Object Array]‘

Inherit —————————————————————————

概念 : 在原有对象的基础上,略作修改,得到一个新的对象        不影响对象原有功能。好处 : 子类不影响父类,子类可以继承父类的一些功能 (代码复用)写法 :     属性继承:调用父类的的构造函数.call():
        function Person(name,sex){            this.name = name;            this.sex = sex;        }        function Star(name,sex,job){            Person.call(this,name,sex);            //如果不改变this指向,function下的Person中的this指向window            this.job = job;        }
    原型方法/属性的继承:    【拷贝继承】    父类的原型拷贝一份赋给子类,    这样就不会因为JS的引用机制,子类修改的原型属性方法影响父类    Star.prototype = deepCopy(Person.prototype);    【类式继承】      JS中没有类的概念,可以把构造函数等价于java中的类    类式继承写法:
 fu Nction  father   ()  { this . Name =  ' daming ' ;        }; Father.prototype.callname = function   ()  { alert (this . Name);        }; function  Child         Span class= "Hljs-params" > ()  {}; Child.prototype = new  Father ();        //core         var  c1 = new  Child (); C1.callname (); //daming   
    Principle: C1 itself does not have callname method, so find the child on the Callname method Child.prototype above also no Callname method, so find new Father () This anonymous object, the instance object itself does not have this method, To find the Callname method on the Father.prototype through the prototype chain, then call the question: Child.prototype = new Father (); A word covering all the prototype of the child, even chil    D.prototype.constructor is also covered, so c1.constructor can not find, to find its parent through the prototype chain constructor, so the value of C1.constructor is father.    Therefore, in order to avoid this problem to manually modify Child.prtotype.constructor=child;    In addition, the this.name is changed to an array [;    Create an instance object to manipulate it var c1 = new Child ();    C1.name.push (4);    var C2 = new Child (); alert (c2.name);//1,2,3,4 thus discovers that two different instance objects actually have an effect on each other because either C1 or C2, they are not found on their own while reading the Name property, but are looking through the prototype chain to the anonymous instance object, new Father (). 。 So the same address is being manipulated.    And then have an impact.    To avoid this problem, it is necessary to inherit attributes and methods separately.  function F () {};//1 F.prototype = father.prototype;//2 Child.prototype = new F ();//3 Child.prototype.constructor = CHILD;//4//Above is a class-inherited 4 sentence 1 sentence in the declaration of the F constructor has no attributes. In 2 sentences, F only inherits father's prototype method, and has no attributes of its own.    In 3 sentences, an instance object of F is assigned to the child's prototype. In this way, if the instantiation of CHILD->C1 calls C1.name, only the instance object of F can be looked up, and there is no name on this property, and by 2, the instance of FLike there is no name for this property, so the system will only return undefined and if C1 calls the method Callname, the system will always find Father.prototype through the prototype chain to invoke the Father.prototype method on Callname.    Therefore the attribute and method inheritance are separated.    The method of inheriting the property is also called Father.call (this) in the child constructor; "Prototype Inheritance"
         function Father(){             This. Name =' father '; }varF1 =NewFather ();varC1 = Cloneobj (F1); C1.name =' Millet '        //alert (c1.name)//Millet        //alert (f1.name)//Father        varA = {name:' A '};varb = Cloneobj (a); B.name =' B ';        alert (b.name); alert (a.name); function cloneobj(obj){             function F(){}; F.prototype = obj;return NewF (); }
    【三种继承方式总结】    拷贝继承:通用型的 有new或无new的时候都可以使用    类式继承:适合new 构造函数    原型继承:适合无new的形式

Copyright NOTICE: This article for Bo Master original article, reprint also please message.

In-depth JavaScript object-oriented, JS's prototype chain, inheritance

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.