zoukankan      html  css  js  c++  java
  • javascript高级知识点——函数原型

    代码信息来自于http://ejohn.org/apps/learn/。

    向函数的原型中添加方法

    function Ninja(){} 
     
    Ninja.prototype.swingSword = function(){ 
      return true; 
    }; 
     
    var ninjaB = new Ninja(); 
    console.log( ninjaB.swingSword(), "Method exists and is callable." );

    通过实例化对象可以访问,因为构造函数实例化的对象拥有__proto__属性这个属性的值是构造函数的原型,如果实例化对象本身没有这个方法,它自动去访问__proto__,所以可以调用原型里的方法。

    调用顺序

    function Ninja(){ 
      this.swingSword = function(){ 
        return true; 
      }; 
    } 
     
    // Should return false, but will be overridden 
    Ninja.prototype.swingSword = function(){ 
      return false; 
    }; 
     
    var ninja = new Ninja(); 
    console.log( ninja.swingSword(), "调用的是实例化对象方法,而非原型的" );

    这个例子可以很好的说明调用顺序:先访问实例化对象自身,如果没有才访问其函数原型中的。

    原型的改变影响所有继承它的实例化对象

    function Ninja(){ 
      this.swung = true; 
    } 
     
    var ninjaA = new Ninja(); 
    var ninjaB = new Ninja(); 
     
    Ninja.prototype.swingSword = function(){ 
      return this.swung; 
    }; 
     
    console.log( ninjaA.swingSword(), "即使在定义之后,方法仍然存在" ); 
    console.log( ninjaB.swingSword(), "同样的情况" );

    正如先前所说,实例化对象本身没有的属性,它就去函数的原型里寻找。如果原型修改,它寻找的结果也不一样。

    问题:构建可以链式调用的方法

    function Ninja(){ 
      this.swung = true; 
    } 
     
    var ninjaA = new Ninja(); 
    var ninjaB = new Ninja(); 
     
    //在原型里增加一个方法,返回调用者,并修改swung的值
     
    console.log( ninjaA.swing().swung ); 
    console.log( ninjaB.swing().swung );

    通过返回this实现

    function Ninja(){ 
      this.swung = true; 
    } 
     
    var ninjaA = new Ninja(); 
     
    Ninja.prototype.swing= function(){
        this.swung = false;
        return this;
    } 
    console.log( ninjaA.swing().swung ); 

    this指向调用它的对象,在方法中返回this,函数执行完毕时,仍然是调用它的对象。

  • 相关阅读:
    webpack打包加大就是为了加大文件允许体积,提升报错门栏
    webpack打包配置服务
    webpack 打包 js图片
    webpack 打包css 图片
    webpack打包多个html打包,分别引入不同的 多个 js 文件 流程
    webpack打包所有css打包压缩到一个js里面
    webapck 打包多个 js ,多个 html 同时打包流程
    webpack打包多个js 合并成默认 main.js文件步骤
    wbpack打包准备工作
    模拟攒机小程序 兼容提示 电源功率推荐 小白攒机神器
  • 原文地址:https://www.cnblogs.com/winderby/p/4073948.html
Copyright © 2011-2022 走看看