JS-day04-4.27

作者: xcx时光你好 | 来源:发表于2018-05-05 17:36 被阅读0次

JS-day04-4.27

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。==也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历==

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
          // function test() {
          //    //在函数内部 我们可以通过arguments 获取函数调用的时候的实参
          //    console.log(arguments);
          //    console.log(1);
          // }
          // test(4,5,6);
           // 求任意个数的最大值
           // function getMax() {
           //   var max=arguments[0];
           //   for(var i=1;i<arguments.length;i++){
           //       if (max<arguments[i]) {
           //           max=arguments[i];
           //       }
           //   }
           //   return max;
           // }
           // var max=getMax(5,12,22);
           // console.log(max);
           // 求任意个数的和
           function getSum(n) {
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
           }
            var sum=getSum(10,2,100);
            console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>

案例

函数其它

匿名函数

匿名函数：没有名字的函数

匿名函数如何使用：

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

自调用函数

匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

(function () {
  alert(123);
})();

函数是一种数据类型

function fn() {}
console.log(typeof fn);
函数作为参数

因为函数也是一种类型，可以把函数作为两一个函数的参数，在另一个函数中调用

函数做为返回值

因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

代码规范

1.命名规范  
    变量、函数 的命名 必须要有意义
    变量 的名称一般用名词
    函数 的名称一般用动词
2.变量规范   
    操作符的前后要有空格
    var name = 'zs';      5 + 6
3.注释规范
    // 这里是注释
4.空格规范
    if (true) {
      
    }
    for (var i = 0; i <= 100; i++) {
      
    }
5.换行规范
    var arr = [1, 2, 3, 4];
    if (a > b) {
      
    }
    for (var i = 0; i < 10; i++) {
      
    }
    function fn() {
      
    }

作用域

作用域：变量可以起作用的范围

全局变量和局部变量

==全局变量
在任何地方都可以访问到的变量就是全局变量，对应全局作用域==
==局部变量
只在固定的代码片段内可访问到的变量==，最常见的例如函数内部。对应局部作用域(函数作用域)

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

块级作用域

==任何一对花括号（｛和｝）中的语句集都属于一个块==，在这之中定义的所有变量在代码块外都是不可见的，==我们称之为块级作用域。==

在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域

作用域链

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。


将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。


// 案例1：
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}



// 案例2
function f1() {
    var num = 123;
    function f2() {
        console.log(num); 
    }
    f2();
}
var num = 456;
f1();

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：

==把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。==
==把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。==
==先提升var，在提升function。==

JavaScript的执行过程

// 案例1
var a = 25;
function abc() {
  alert(a); 
  var a = 10;
}
abc();


// 案例2
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

变量提升

变量提升
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

对象

为什么要有对象

function printPerson(name, age, sex....) {
}
// 函数的参数如果特别多的话，可以使用对象简化
function printPerson(person) {
  console.log(person.name);
  ……
}

什么是对象

现实生活中：万物皆对象，==对象是一个具体的事物==，一个具体的事物就会有行为和特征。
举例：一部车，一个手机
车是一类事物，门口停的那辆车才是对象
特征：红色、四个轮子
行为：驾驶、刹车

JavaScript中的对象

 JavaScript中的对象其实就是生活中对象的一个抽象
    JavaScript的对象是无序属性的集合。
        其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
    对象的行为和特征
        特征---属性
        行为---方法

==事物的特征在对象中用属性来表示。==
==事物的行为在对象中用方法来表示。==

解释说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //对象的概念
     // 什么是对象
     // 现实世界中，万物皆对象，一切具体事物都是对象。ps：对象是一切具体的事物
     // 对象：特征 名词 用于描述这个对象的 和行为 动词
     //程序中的对象 
     //是对现实世界中事物的抽象
     var student={
        name:'张飞',
        age:18,
        sex:'男',
        sayHi:function() {
           console.log('hello');
        },
      };
      student.sayHi();
        //对象具有属性和方法
        //属性：特征
        //方法:行为
    </script>
</head>
<body>
    
</body>
</html>

对象字面量

字面量：11 'abc' true [] {}等

var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
         //如何创建一个对象，如何使用对象的成员
         // 对象：属性和方法--成员
         // 函数和对象有什么区别
         // 函数-可以封装一段代码
         // 对象-封装一组属性和方法
         // 创建某只dog对象
      //     属性：name 昵称 type 品种 age color
      //     方法：bark 叫 eat 吃
      var dog={
        name:'小可爱',
        type:'金毛犬',
        age:2,
        color:'yellow',
        bark:function() {
            console.log('汪汪');
        },
        eat:function() {
            console.log('骨头');
        },
      }
      //如何访问属性 对象.属性名
      console.log(dog.name);
      // 如何访问方法  对象.方法名 
      dog.bark();
      //属性的另一种访问方式
      //访问数组中的某个元素  array[0]
      console.log(dog['name']);
      console.log(dog['age']);

      //函数和方法有什么区别？
      //函数：独立存在的函数
      function fn() {

      }
      fn();//函数调用
      //方法：属于对象的函数
      dog.bark(); //方法的调用
    </script>
</head>
<body>
    
</body>
</html>

思考：

如何把学生对象、老师对象、英雄对象改写成字面量的方式

对象创建方式

==对象字面量==

 var o = {
      name: 'zs',
      age: 18,
      sex: true,
      sayHi: function () {
        console.log(this.name);
      }
    };

==new Object()创建对象==

var person = new Object();
    person.name = 'lisi';
    person.age = 35;
    person.job = 'actor';
    person.sayHi = function() {
      console.log('Hello,everyBody');
    }

==工厂函数创建对象==

function createPerson(name, age, job) {
      var person = new Object();
      person.name = name;
      person.age = age;
      person.job = job;
      person.sayHi = function(){
        console.log('Hello,everyBody');
      }
      return person;
    }
    var p1 = createPerson('张三', 22, 'actor');

==自定义构造函数==

function Person(name, age, job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.sayHi = function(){
        console.log('Hello,everyBody');
      }
    }
    var p1 = new Person('张三', 22, 'actor');

案例解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
         //1.对象字面量
         // var hero={
         //     name:'妲己',
         //     weapon:'弓箭',
         //     equipment:['头盔','靴子','盔甲'],
         //     blood:1000,
         //     attack:function() {
         //         console.log(this.name+'射箭');
         //     },
         //     run:function() {
         //         console.log(this.name+'向右跑');
         //     },
         // }
         // console.log(hero.name); //妲己
         // hero.attack(); //妲己射箭
           // 2.  new Object()
           // Object()是一个构造函数
           // new的方式来调用构造函数
           //new Object()调用构造函数
           // var hero=new Object();// 创建了一个空的对象  通过hero变量来接收这个对象
           //打印一个不存在的值 输出的是undefined
           // console.log(hero.name);
           //属性
           //JavaScript的动态特性
      //      hero.name="妲己";
      //      hero.weapon='弓箭';
      //      hero.equipment=['头盔','靴子','盔甲'];
      //      hero.blood=100;
      //      //方法
      //      hero.attack=function() {
      //        console.log(this.name+'射箭');
      //      };
      //      hero.run=function() {
         //         console.log(this.name+'向右跑');
            // };
            // var hero1={
            //  name:'keke',
            //  weapon:'sheji'};
            // var hero2={
            //  name:'liubei',
            //  weapon:'sheji'};
            // console.log(hero1); //{name: "keke", weapon: "sheji"}
            // console.log(hero2); //{name: "liubei", weapon: "sheji"}

            //3.工厂方法
            // function createHero(name,age,weapon,blood) {
            //  var hero=new Object(); //返回一个空的数组
            //  //属性
            //  hero.name=name;
            //  hero.age=age;
            //  hero.weapon=weapon;
            //  hero.blood=blood;
            //  //方法
            //  hero.sayHi=function() {
            //      console.log(hero.name+':hello');
            //  };
            //  return hero;
            // }
      //        var hero1=createHero('zs','18','射击',100);
      //        console.log(hero1); //{name: "zs", age: "18", weapon: "射击", blood: 100, sayHi: ƒ}
      //        hero1.sayHi(); //zs:hello

               //自定义的函数
               //帕斯卡命名 每一个单词的第一个字母大写，后续的每一个单词的首字母都大写
               //new Object();
               //new Hero();
              //自定义构造函数
              function Hero(name,age,weapon,blood) {
                //this 动态的给对象增加成员
                //this 指向了当前对象
                this.name=name;
                this.age=age;
                this.weapon=weapon;
                this.blood=blood;
                this.sayHi=function() {
                    console.log(this.name+'hahha');
                }
              }
              var hero1=new Hero('keke',18,'sheji',100);
              console.log(hero1.name);

              //工厂方法与自定义构造函数的区是 工厂方法在函数内部创建了一个空的对象 并且需要用return返回  而自定义构造函数是在函数外部用new创建一个对象 函数中不需要用return返回值
    </script>
</head>
<body>
    
</body>
</html>

属性和方法

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，==属性一般是名词，用来描述事物的特征==
如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，==方法是动词，描述事物的行为和功能==

new关键字

构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

构造函数用于创建一类对象，首字母要大写。
==构造函数要和new一起使用才有意义==。

new在执行时会做四件事情

 new会在内存中创建一个新的空对象
    new 会让this指向这个新的对象
    执行构造函数  目的：给这个新对象加属性和方法
    new会返回这个新对象

案例解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
          //Student 自定义构造函数
          //属性：name age sex score
          //方法:sayHi
          function Student(name,age,sex,score) {
                  //属性
                  this.name=name;
                  this.age=age;
                  this.sex=sex;
                  this.score=score;
                  //方法
                  this.sayHi=function() {
                    console.log(this.name+':hello');
                  }
          }
          var stu1=new Student('keke',18,'男',100);
          var stu2=new Student('meme',18,'女',100);
          //new的执行过程
          //1.在内存中创建一个空的对象
          // 2.让构造函数中的this指向刚刚创建的对象
          // 3.执行构造函数，在构造函数中设置属性和方法（当然也可以做其他事情）
          // 4.返回了当前对象
          console.log(stu1);
          console.log(stu2);
    </script>
</head>
<body>
    
</body>
</html>

this详解

JavaScript中的this指向问题，有时候会让人难以捉摸，随着学习的深入，我们可以逐渐了解
现在我们需要掌握函数内部的this几个特点
    1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
    2. 一般函数直接执行，内部this指向全局window
    3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
    4. 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

案例解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //this出现在以下位置，分别代表什么
          // 1.在函数中---this 指向Window
          // 2.在方法中---this 指向的是这个方法所属的对象
          // 3.构造函数中----this 就是构造函数创建的对象

          //函数
          // function fn() {
          //    console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
          // }
          // fn();
          
          //对象
          // var obj={
          //    name:'zs',
          //    fn:function() {
          //       console.log(this.name)
          //    },
          // };
          // obj.fn();

          //构造函数
          function Fn() {
             this.name='zs';
             this.age=15;
             console.log(this);
          }
          var obj=new Fn();//调用构造函数 返回值： Fn {name: "zs", age: 15}
          Fn();//调用函数
    </script>
</head>
<body>
    
</body>
</html>

对象的使用

遍历对象的属性

==通过for..in语法可以遍历一个对象==

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

删除对象的属性 delete 对象.属性名

function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

案例解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
       // var obj={
       //   name:'zs',
       //   age:18,
       //   sex:'男',
       //   sayHi:function(){
       //       console.log(this.name+':haha');
       //   },
       // };
       //如何访问对象的属性
       //obj.name 或 obj['name']
       //for in 可以遍历对象的成员
       // for(var key in obj) {
       //   console.log(key+'---'+obj[key]); 
       //   //name---zs 
       //    // age---18
    //   //    sex---男
    //   //    sayHi---function(){
       //       // console.log(this.name+':haha');
       //    // }
       // } 

       // var o={}
       // for(var i=0;i<10;i++) {
       //   o['a'+i]=i*2;
       // }
       // // console.log(o); //{a0: 0, a1: 2, a2: 4, a3: 6, a4: 8, …}

       // for(var key in o) {
       //      console.log(key+'---'+o[key]);
       // }


       //删除属性
       var o={
        name:'ab',
        say:function() {

        },
       };
       console.log(o.name);//ab
       delete o.name;
       console.log(o.name);//undefined
    </script>
</head>
<body>
    
</body>
</html>

JS-day04-4.27
arguments的使用 JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一...

JS-day04-4.27

arguments的使用

案例

作用域

对象

对象的使用

相关文章

JS-day04-4.27

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读