js-原型,原型链

 原型:

1.定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象

    <script type="text/javascript">
//        Person.prototype --原型
//        Person.prototype={}  是祖先
       Person.prototype.LastName = "xu"
         function Person(){
             
         }
         var person = new Person();
         var person1 = new Person();
        </script>

此时person,person1,访问自身对象是没有LastName属性的。但是会继续往上访问原型,可以找到LastName属性。

原型相当于函数产生对象的隐形父级,是可以访问的  

person和person1访问的是同一个对象,可以说Person.prototype是person和person1的公共祖先

2.利用原型特点和概念,可以提取共有属性

        function Car(color,owner){
            this.name = "BWM";
            this.height = 1400;
            this.lang = 4900;
            this.color = color;
            this.owner = owner;
        }
        var car = new Car("red","ji");
        var car1 = new Car("blue","bi")

要产生两个car对象,两个car对象的有三个共有属性name,height,lang,此时我们就可以利用原型将它们提出来。

Car.prototype={
            height:1400,
            lang:4900,
            name:"BWM"
        }
        function Car(color,owner){
            this.color = color;
            this.owner = owner;
        }
        var car = new Car("red","ji");
        var car1 = new Car("blue","bi")

也是可以访问到所有属性的:

3.原型的曾删改查

4.对象如何查看原型——>隐式属性__proto__

__proto__是p对象的隐式属性,Prototype是属于__proto__的。

<script>
            person.prototype.name="suny"
            function person(){
                
            }
            var p = new person();
        </script>

 深度理解:

            </script>
            person.prototype.name="suny"
            function person(){
                
            }
            var p = new person();
            person.prototype.name="liu"
        </script>

此时person.rototype.name所指是同一个属性,所以是可以直接改变的p.name:"iu"

<script>
            person.prototype.name="suny"
            function person(){
                
            }
            var p = new person();
            person.prototype={
                name:"liu"
            }
</script>

此时p里的__proto__的person.prototype所指的对象person.prototype={name:"suny"}和下面person.prototype={name:"liu"}这个不是同一个

用于理解:

var obj={name:"xu"};
     obj1=obj;
    obj={name:"liu"}

5.对象如何查看对象的构造函数——>constructor

                <script>
            person.prototype.name="suny"
            function person(){
                name="xu"
                age=18
            }
            var p = new person();
        </script>

原型链

1.如何构成原型链?

            <script>
            Grand.prototype.lastname = "xu"
            function Grand(){
                
            }
            var grand = new Grand();
            
            Father.prototype = grand
            function Father(){
                this.name="xuhang"
            }
            var father= new Father();
            
            Son.prototype = father
            function Son(){
                this.hobbit = "smoke"
            }
            var son= new Son();
        </script>

 

son.hobbit查找顺序:son自身就有

son.name查找顺序:son——Son.prototype——father

son.lastname查找顺序:son——Son.prototype——father——Father.prototype——grand——Grand.prototype

这种逐级查找方式就叫做原型链,和作用域链类似

2.原型链上属性的增删改查

和原型的类似

3.绝大多数对象的最终都会继承自Object.prototype

4.Object.create(原型);

var obj={name:"xu",age:18}     ----原型
var obj1 = Object.create(obj)  

现在obj1就是一个对象 

拓展tostring重写:

        <script>
            Person.prototype = {
                toString : function() {
                    return "hehe";
                }
            }
            function Person(){
                
            }
            var person = new Person();
            </script>

本来访问person的tostring属性是在Object.prototype上访问的:

 

可是由于我们自己在person.prototype上添加了tostring属性,所以就直接中断了对Object.prototype的访问得到:

这个叫做重写,属性名相同却能执行不同的功能

posted @ 2018-12-21 10:09  徐-航  阅读(235)  评论(0编辑  收藏  举报