彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > 理解 javascript prototype

理解 javascript prototype

发布时间:2019-08-31 14:43编辑:新闻动态浏览(177)

    理解javascript中的prototype

    以前一直对javascript中的prototype不是很理解,今天在阅读了《javascript高级程序设计之后》终于理解了其中的prototype。来简单的总结一下从书中学习到的内容。

     

    我们都知道在创建了一个function之后,这个function就具有了prototype这样的一个属性,利用这个prototype我们可以做很多的事情,其中我们经常用到的一点就是利用它来当做构造函数,因此,本文重要从function作为构造函数的角度来说明一下prototype。

     

    其实javascript中的构造函数与其他的函数没有什么区别,只是调用的方式的略微点不一样。下面来看代码。

     

                function Dog(){
                  this.name = Ben;
               }
    

    我们声明了一个简单的函数,叫做Dog,如果我们只是简单的调用这个方法 ,那么她只会为全局对象添加一个name属性。并不会生成对象。

     

    但是当我们把这个方法当做构造函数来调用的时候,情况就会不一样了,这个函数会返回一个对象。

     

     var d = Dog();
     console.log(d) //undefined
    
            //作为构造函数调用
            var dog = new Dog();
            console.log(dog) // dog对象。
    

    这属于javascript中生成对象的方式了,相信大家应该都明白,下面我们就来详细说明这个prototype在这个构造函数中到底起了什么作用。

     

    在文章开头的时候,就已经说了,在声明构造函数的时候,这个函数已经prototype这样一个属性。在chrome的控制台中,输入代码可以查看到这样的一个结果。

     

              console.log(Dog.prototype); //Dog {} 
    

    实际上函数的prototype指向了一个对象,称作为原型对象,这个对象其中包含了一个属性叫做constructor,但是为什么我们在输出的对象之中看不到它呢,这是在javascript中,把这个属性的Erumerable属性设置为false了,所以在这里我们看不到,但是看不到我们还是可以访问到这个属性。看下面的结果:

     

     

              console.log(Dog.prototype.constructor);
             // function Dog(){
             //     this.name = Ben;
             //  } 
    

    看到结果,是不是发现了什么,输出来的结构就是我们自己定义的构造函数,那么他们到底是什么关系呢?我们可以使用相等操作符来比较一下。

     

     

           console.log(Dog.prototype.constructor === Dog);//true
    

    我们可以看到结果,这两个实际上是完成相等的。

     

    这么说来,我们是不是又可以用constructor来访问到prototype呢?没错,这样是完全可以的,这样一样,这里面就相当于形成了一个循环指向关系,这个实际上也可以采用递归的方式来验证一下,调用递归的时候很快就会调用栈溢出,因为在这个递归调用中是没有出口的。

    上面的关系我们可以简单的用下面的图来表示一下

    图片 1

    好,上面我们已经简单的介绍了一下构造函数中的prototype,那么我们再来看一下,对象中的prototype,在javascript中,声明对象中并没有prototype这个属性,而是使用__proto__(注意:__是两个_) 来访问prototype ,那么对象中的__proto__跟构造函数中的prototype又是什么关系呢?

     

               dog.__proto__ === Dog.prototype;//true
    

    结果一看便知,通过这个结果我们就可以知道同一个类的所有对象的__proto__都是相等的,因为他们实际上都指向了构造函数的prototype。

     

     

    现在看完了,构造函数和对象的的prototype,我们再来看一下prototype这个对象本身,刚才我们已经提过了,prototype其实本身就是一个对象,既然他是一个对象,我们就可以扩展这个对象,下面我们为这个对象添加一个方法和属性。

     

    Dog.prototype.say = function(){
    console.log('wangwang');
    }
    
    Dog.prototype.color = black;
    

     

    我们再来看一下刚才自己定义的那个dog对象,是不是也有了这个方法和属性。

     

    dog.day() ;// 'wangwang'
    dog.color ;// 'black';
    

     

    我们通过调用发现,这个这个对象上也有了个方法和属性,但是我们并没有直接在对象添加方法和属性,这就说明了,prototype中的属性和方法也会为对象共享。

    在这里共享是通过查找得到的,当我们访问一个对象的属性时,这个对象首先会在自己的属性集里面去找这个属性,如果找到了,那么就直接返回,如果没有找到就会去prototype的属性集里面找。在这个例子中我们当我们访问属性和方法的时候,首先在dog对象里面找,找不到之后再去prototype的属性和方法找。

    既然这些方法和属性都是共享的,那么我们修改这些方法和属性会有什么结果呢?

     

             var dog2 = new Dog();
             dog.color  = red;
             console.log(dog2.color);  //black
    

    从结果可以看到,dog2的color属性并没有受到影响,这是因为在使用对象去操作prototype的属性时,并没有真正的操作prototype,而是自己新建了一个color属性,并且将red赋值给了color,所以这里并没有影响到prototype。也就没有影响到dog2了。(读者可以自己验证一下,color是作为dog对象的属性而存在的)。

     

    同样的我们可以看到当我们修改了方法之后,prototype中方法并没有收到影响。

    关于prototype的简单说明就到这里。文中如有错位还望各位大神指正。

     

     

    以前一直对javascript中的prototype不是很理解,今天在阅读了《javascript高级程序设计之后》终于理解了其中的prototyp...

    javascript prototype

    • 原型法的主要思想是,现在有个类A,想要创建一个类B,这个类是以A为原型的,并且能进行扩展,则称B的原型为A。

    • Javascript 的方法分为三类: 类方法、对象方法、原型方法。

      function People(name) {
        this.name = name;
        // 对象方法
        this.Introduce = function() {
          console.log("name is " + this.name);
        }
      }
      // 类方法
      People.Run = function() {
        console.log("can run");
      }
      // 原型方法
      People.prototype.IntroduceZh = function() {
        console.log("pro name is " + this.name);
      }
      // 测试
      var p = new People("jack");
      p.Introduce();
      People.Run();
      p.IntroduceZh();
      
    • obj1.func.call(obj) 方法,就是将 obj 当成 obj1,调用 func 方法。

    1. prototype 的含义
    • JavaScript中的每个对象都有 prototype 属性。对象的 prototype 属性的解释是,返回对象类型原型的引用。

    • A.prototype = new B(); A的prototype为B的一个实例,可以理解为 A 将 B 中的方法和属性全部克隆了一遍,A 能使用 B 的方法和属性。

    1. 验证
    function base() {
      this.show = function() {
        console.log("base:show");
      }
    }
    function extend() {
      this.show = function() {
        console.log("extend:show");
      }
    }
    extend.prototype = new base();
    var instance = new extend();
    instance.show(); // extend:show
    var base = new base();
    base.show.call(instance); // base:show
    

    函数运行时,会先去本体的函数中查找,如果找到则运行,否则到prototype中查找函数。或者可以理解为prototype不会克隆同名的函数。

    本文由彩世界平台发布于新闻动态,转载请注明出处:理解 javascript prototype

    关键词:

上一篇:javascript感应鼠标图片透明度显示的方法

下一篇:没有了