前端小站


  • 首页

  • 归档

  • 标签

js中的this运用

发表于 2015-12-05

this

只能在函数内部使用,原则,this指向一个对象,在函数中调用。this指的是调用函数的那个对象。

可以参考”http://blog.jobbole.com/39305/“
常用的调用情况有下面几种,在使用的时候记住使用的环境进行嵌套就行了 。

1.纯粹的函数调用时,属于全局调用,因此this指向全局window。

function test(){
    this.x=1;
    alert(this.x);      
}     
test();//1

为了证明this指向全局对象,以下代码等同于上边:

var x=1;
fucntion test(){
    alert(this.x)
}
  test();//1

2.当函数作为对象的方法调用时,this指向该对象。

例:var obj= {
    x:10,
    y:20,
    fn:function(){
        this.x = 20;
        console.log(this)//this指向obj
    }
}
fn()

3.当函数作为弹出函数调用时,this指向全局对象(严格模式时,为undefined)

3.作为构造函数中的this时,指向创建该函数的对象

例:function fn1(){
        var i = 0 ;
        var j = 0 ;
        this.x=1;
         console.log(this)
    }
fn2 = new fn1();
fn2 = function(){
      this.y=1;
      console.log(this)//this指向fn1
 }
 fn1(fn2) 

4.apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

var x = 0;

  function test(){

    alert(this.x);

  }

  var o={};

  o.x = 1;

  o.m = test;

  o.m.apply(); //0 

嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接
被某对象调用时,该this才指向该对象。正常函数的调用,this
指的是window,特殊函数的调用,this指象对象。函数声明、
匿名函数和函数表达式在全局中调用 this指向window

js变量的作用域

发表于 2015-11-25

浏览器对js文件的解析机制

function fn(){};
fn();
console.log(i);
var i=10;
var k=20;
console.log(k);
首先,浏览器在解析这段代码前,是先把代码中的变量 i和k放到了代码最前面。还有函数表达式。
上例:
 var i ;
 var k ;
 function fn(){};
 fn();
 console.log(i);//此处的console.log(i) 的结果是undefind;从执行循序来看是无法获取到i的值的。
 i=10;
 k=20;
 console.log(k);//此处k的值就是打印出来就是 20;从执行顺序来看,可以获取到k的值。

#变量的作用域

函数的书写形式

要想了解变量的作用域需要先明白创建函数的三种形式
声明函数是使用function关键字+函数名来声明的函数
例:
    function test(){

    };
函数表达式是使用function关键字,但没有函数名,把函数赋值给一个变量的函数。
例:
        var i = function(){

        };
匿名函数是直接使用关键字来声明的函数的。
例:
    function(){
    };
函数表达式和声明函数的区别:
 函数表达式可以直接使用()操作符。()表示立即执行。声明函数不可以直接使用。
 想要使用的话,可以先把声明函数包装为函数表达式的形式。可以在对声明函数添加+、-、()等符号。推荐使用().
 例:声明函数包装为函数表达式,使用();
        (function(){
             console.log('嘿嘿!')
        })();
         函数表达式使用();
         a = function test(){
             console.log('啊,你是嘿嘿呀!')
         }();

作用域

首先了解下全局变量和局部变量。
    在js中 使用 var 的定义的变量叫做局部变量。直接定义的变量就是全局变量。
例:
 var i= 10; i 这个变量就是局部变量
  i= 10 ; i 这个变量就是全局变量
变量的作用域
    例1:
     var a = 10;//a 是局部变量,如果它没有在function中,它的作用域就是整个js;
      b = 20; // b是全局变量,作用域是整个js;
     function fn (){
         var c =30 ; //c是局部变量,它的作用域是在fn函数下。
         function fn1(){
             i = 40; //i 是全局变量,它的作用域是在整个js下。
             var c = 40 ;//c 是局部变量,它的作用域是在fn1下。
             var d = 50;  //d 是局部变量,它的作用域是在fn1下。
             console.log(a);
                }
         fn1();

     }
     fn()
     例2:
     function fn(){
         var c=30;
         function fn1(){
          console.log(c)//此时c的值就使它父级function的c的值30;
         }
     }
 小结;当变量是全局变量时,不论变量有没有在function下,变量的作用域都是整个js。当变量定义为局部变量时,
 如果变量没有在function下,它的作用域就是整个js。如果在function下,就作用域这个function。
 如果在function下有使用变量,却没有定义时,
 就往上找到它的父级function,继承它父级function的值。

函数的使用方法拓展

在外部使用函数内部的变量

例1:
  var  j=function(){
          var max = 10;
          return function(){
            return 1;
          }()
  }        
 var a = j ();//把值赋予a 方便调用。
 console.log(j());
 例2:
 function fn (){
         var max = 10;
         var fn2 = function(num){
              if(num>max){
                  console.log(max);
                  console.log(num);

              }

         }
         return fn2;//fn2 是fn函数的返回值
  }
     var news=fn();//fn()是等于fn2的。
     news(30);//news 调用的是fn2

计算函数参数值的和的方法

      例1:function jisuan(){
      var fuhao = arguments[arguments.length-1];

    // var  changdu = arguments.length;

    if(fuhao=='+'){
        for(var i= 1 ;i<arguments.length-1;i++){

            arguments[0]+=arguments[i]
        }
        return arguments[0];
        } else if (fuhao=='-') {
        for(var i = 1;i<arguments.length-1;i++){
            arguments[0]-=arguments[i]
        }
        return arguments[0];
    } else if (fuhao=='*'){
        for(var i = 1;i<arguments.length-1;i++){
            arguments[0]*=arguments[i]
        }
        return arguments[0];
    }else if (fuhao='/') {
        for(var i = 1;i<arguments.length-1;i++){
            arguments[0]/=arguments[i]
        }
        return arguments[0];
       }

};
jisuan(10,20,30,'+');
console.log(jisuan(10,20,30,'+'));
console.log(jisuan(1,2,3,'-'));
console.log(jisuan(1,2,3,'*'));
console.log(jisuan(1,2,3,'/'));

on the way 路

html和css知识总结

发表于 2015-11-25

一、html

1、元素:

html就是由各种各样的html元素构成的文本文件。
元素与标签的区别例:
<p>这是一个p标签
<p>这是内容</p>,这就是一个元素,元素是由一个开始和结束的标签组成的,用来包含某些内容。

2、标签:

标签可以分为块级、行级标签和内联标签

块级标签的特征:

1、默认独占一行
2、支持定义宽高。没有宽高时,默认撑满一排
3、支持所有css命令

行级标签的特征

1、同排可以继续跟同类的标签
2、内容撑开高度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析

内联块标签的特征:

1、具有行级标签的属性
2、可以设置宽高

块级标签主要有:

<div></div> 
       双标签;可以把内容分割为独立的、不同的部分。
       <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 
       双标签;这用来定义标题的标签。<h1>用来定义最大的标题。<h6>用来定义最小的标题。默认属性;margin、font-wight、font-size
<p></p>  
       双标签;用来定义文章段落、内容。默认属性;margin
       <ul>
           <li></li>
       </ul> 
       双标签;<ul>、<li>标签定义无序列表,必须组合使用。不可嵌套其他标签,如果要嵌套,必须在子级的li中嵌套。默认属性;margin、padding-left、list-style-type
       <ol>
           <li></li>
       </ol>
        双标签;<ol>、<li>标签定义有序列表,必须组合使用。不可嵌套其他标签,如果嵌套,必须在子级的li中嵌套。默认属性;margin、padding-left、list-style-type
        自定义列表:<dl> <dt> <dd></dd> <dt/></dl>

行级标签主要有:

<span></span>
双标签;表示没有意义的内容;没有默认属性
<q></q>:短文本引用 比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的</q>。
<blockquote></blockquote>长文本引用
<br>换行标签
<hr>分割线标签
address 为页面加入地址信息 <address>上海市松江区丽德创业园</address> 样式为斜体
code 在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用code标签了 <code>var i = 0;</code>
pre 预格式化的文本 要插入多行代码时不能使用code标签,如果是多行代码,可以使用pre标签

<a href="http://www.baidu.com" target="" title="鼠标放在上面的tips"></a>
双标签;表示链接;target="blank"表示在新窗口打开链接 target="self"表示在当前窗口打开链接,为默认值。默认值有:text-decoration
<a>标签的四种状态:1、a:link 表示未被访问的链接 2、a:visited 表示已被访问的链接 3、a:hover 表示鼠标指针移动到链接上 4、a:active 表示正在被点击的链接
<strong></strong>
双标签;表示强调;默认属性:font-weight
<em></em>
双标签;默认属性:font-style:intalic;

表格、表单标签主要有:

 表格标签:table tbody这个标签不怎么使用
     tr 表格的行 th 表格的头部的一个单元格,表格表头
     td 表格的一个单元格 caption 表格标题 summary 属性 表格的摘要
     <img src="路径"alt="描述" title=“鼠标滑过时显示的文本”/>
     单标签;表示图片;
     <form action="url" method="get" target="-self"></form>
     action属性 表示输入的数据被传送到的地址,比如一个PhP页面
     method属性有get/post,数据传送的方式 target属性self/blank,black是在新网页中打开
     lable标签为input标签定义标注label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同
     <input type="text" name="文本" value=""/>
     用于账号的输入
     <input type="password" name="mima" value=""/>
     用账号的密码输入
     <input type="checkbox" name="" value="" checked="checked"/>
   用于复选框 当checked="checked"时,该选项被默认选中
   <input type="radio" value="nan" name=""/>
   用于单选框
   <input type="file"/>
   用于文件上传
   <input type="button" value="按钮"/>
   用于创建按钮
   <input type="reset" value="重置"/>
   设置按钮为重置按钮
   <input type="submit" value="提交"/>
   设置按钮为提交按钮
   <input type="hidden" value="存储数据使用"/>
   <textarea value="" name="">我是文本框</textarae>
   论坛类的留言框,reset设置为none时可以控制扩展。文本域可以控制行和列的数值。
   cols属性:多行输入域的列数。rows属性多行输入域的行数。
<select>
           <option>12</option>
           <option>13</option>
           <option>14</option>
   </select>
   列表数据选择。一般用于闹钟。具有multiple属性:可以实现多选功能。option下拉属性。
   <iframe src="" width="" height=""></iframe>
  <dl>
     <dt>我们是列表标题</dt>
     <dd>我们是列表内容</dd>
     <dd>我们是列表内容</dd>        
  </dl>
 例:
 <dl>
     <dt>城市</dt>
     <dd>北京</dd>    
     <dd>上海</dd>        
 </dl>

标签属性的转换

display : block; 显示为块级标签
display : in-line; 显示为行级标签
display : none; 显示为无

二、css的样式

待整理...............

blog

小道士

12
我就是我,不一样的水果。

我就是我,不一样的水果。

13 日志
© 2016 我就是我,不一样的水果。
由 Hexo 强力驱动
主题 - NexT.Muse