zoukankan      html  css  js  c++  java
  • ES6_函数方法

      1     //2017/7/15
      2         //Javascript 中的方法:在一个对象中绑定函数,称为这个对象的方法。
      3         /*1*/
      4         var boy={
      5             name:'xiaoming',
      6             birth:2007,
      7             age:function(){
      8                 var y=new Date().getFullYear();
      9                 return y-this.birth;//注意这里的this,在这个方法内部,this始终指向当前对象,也就是boy这个对象,this.birth可以取到boy对象里的birth的值。
     10             }
     11         };
     12 
     13         console.log(boy.age);//打印出整个函数
     14         console.log(boy.age());//10
     15 
     16         /*2*/
     17         function getAge(){
     18             var y=new Date().getFullYear();
     19                 return y-this.birth;
     20         }
     21 
     22         var boy={
     23             name:'xiaoming',
     24             birth:2007,
     25             age:getAge
     26         }
     27 
     28         console.log(boy.age());//10
     29         console.log(getAge());//NaN。注意:这里单独调用getAge()函数,该函数的this指向全局对象,也就是window。
     30 
     31         /*3*/
     32         var fn=boy.age;//不能先拿到boy的age函数,要保证this指向正确,必须用obj.xxx()的形式调用。
     33         console.log(fn());//NaN。
     34 
     35 
     36         /*4*/
     37         //this的指向是个大问题,ECMA决定,在strict模式下让函数的this指向undefined,因此,在strict模式下,我们会得到一个错误,这只是让错误暴露出来,并没有解决this应该指向的正确位置。
     38 
     39         "use strict";
     40         var xiaoming={
     41             name:"xiaoming",
     42             birth:2007,
     43             age:function(){
     44                 var y=new Date().getFullYear();
     45                 return y-this.birth;
     46             }
     47         };
     48 
     49         var fn=xiaoming.age;
     50         fn();//Uncaught TypeError: Cannot read property 'birth' of undefined
     51 
     52         /*5*/
     53         "use strict";
     54         var xiaoming={
     55             name:"xiaoming",
     56             birth:2007,
     57             age:function(){
     58                 function getAge(){
     59                     var y=new Date().getFullYear();
     60                     return y-this.birth;
     61                 }
     62                 return getAge();
     63             }
     64         };
     65         xiaoming.age();//es6.html:426 Uncaught TypeError: Cannot read property 'birth' of undefined
     66         console.log(xiaoming.age());//在非strict模式下:NaN
     67 
     68         //这是因为this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数又指向undefined(在非strict模式下,它重新指向全局对象window!)。
     69 
     70         /*6*/
     71        //修复方法:用一个that变量首先捕获this。
     72 
     73         "use strict";
     74         var xiaoming={
     75             name:"xiaoming",
     76             birth:2007,
     77             age:function(){
     78                 var that=this;//一开始就捕获this,可以放心地在其他方法内部定义其他函数,而不是吧所有的语句都写在同一个方法中。
     79                 function getAge(){
     80                     var y=new Date().getFullYear();
     81                     return y-that.birth;
     82                 }
     83                 return getAge();
     84             }
     85         };
     86         // xiaoming.age();
     87         console.log(xiaoming.age());//10
     88 
     89         /*7*/
     90         //用apply修复getAge()调用
     91         //要指定函数的this指向哪个对象,可以用函数本身的apply方法,该方法接收两个参数,一个是要绑定的this变量,第二个参数是Array,表示函数本身的参数。
     92          // function getAge(){
     93              var y=new Date().getFullYear();
     94              return y-this.birth;
     95          }
     96 
     97          var xiaoming={
     98              name:"xiaoming",
     99              birth:2007,
    100              age:getAge
    101          }
    102 
    103          console.log(xiaoming.age());//10
    104          console.log(getAge.apply(xiaoming,[]));//10
    105 
    106          /*8*/
    107 
    108          //apply()方法与call()方法
    109          //apply()方法是把参数打包成Array再传入。
    110          //call()方法把参数按顺序传入。
    111 
    112          //eg:条用Math.max(3,4,5)
    113          Math.max.apply(null,[3,4,5]);//5
    114          Math.max.call(null,3,4,5);//5
    115          //对于普通函数调用,我们通常把this绑定为null。
    116 
    117          /*9*/
    118 
    119          //注意:利用apply(),可以动态改变函数的行为。以下函数的作用是统计parseInt函数被调用了几次。
    120         var count=0;
    121         var oldParseInt=parseInt;
    122 
    123         window.parseInt=function(){
    124             count+=1;
    125             return oldParseInt.apply(null,arguments)
    126         };
    127 
    128         parseInt('10');
    129         parseInt('20');
    130         console.log(count);//2
  • 相关阅读:
    点击对应不同name的button,显示不同name的弹窗(弹窗功能)
    点击添加本地图片的前端效果制作
    巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
    移动端取消touch高亮效果
    手机网站的几点注意
    图片自动切换+链接
    使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
    使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
    利用jQuery扩展接口为jQuery框架定义了两个自定义函数,然后调用这两个函数
    jQuery链式语法演示
  • 原文地址:https://www.cnblogs.com/LinSL/p/7182873.html
Copyright © 2011-2022 走看看