029-Web前端-JS-对象和函数

#6.11 第二篇 又一篇超长= =｜  Javascript函数  &  Javascript对象

---

1.Javascript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

语法：

    function  函数名(参数1，参数2...){

        函数体;

    }

注意：

     a.函数可以没有参数

     b.函数名的命名规则符合变量的命名规则即可

     c.函数体允许有多句，它是函数在执行时执行的代码

     d.函数在制作时有几个参数，那么使用时就有几个参数

 

函数知识：

(1)函数的声明  (2)函数的调用  (3)函数的类型  (4)函数的作用域  (5)函数的补充说明

---

(1)函数的声明

 

最常用：【function命令】

语法：function 函数名(参数1,参数2,…){  函数体  }

function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。这种方式声明的函数可以通过调用函数名来调用函数。

 

不太多：【函数表达式】

语法：var 变量 =  function(参数1,参数2,…){  函数体  };

这种声明函数的方式没有函数名，而是用变量来指代函数。调用函数的时候通过访问变量来调用函数。

 

几乎不用：【Function构造函数】

语法：var 变量 = new Function();

这种声明函数的方式非常不直观，几乎无人使用。

 

描述：函数的创建

js函数声明的三种类型

    a.function命令声明函数

       语法：function 函数名(参数1...){函数体}

       例子

         function  baozi(){

         console.log('做包子的机器');

         }

         baozi();

    b.函数表达式

        语法：var  变量=function(参数1...){函数体};

        例子：

         var fun=function(){

         console.log('做包子的机器');

         };

         fun();

    c.构造函数

        语法：var  变量=new Function();

---

(2)函数的调用

描述：通常情况下只要函数已经被声明，直接写出函数名和函数参数即可调用函数。

    a.隐式函数提升

        例子：

         baozi();

         function  baozi(){

         console.log('做包子的机器');

         }

 

         var fun=function(){

         console.log('做包子的机器');

         };

         fun();

      b.如果存在同名的函数，则后边的会覆盖前边的（与变量一样）

 

ps：很显然通过调用能够看到，多次重复声明同名的函数会造成的结果就是：

后声明的函数会覆盖先声明的函数。

pss：对于javascript来说，把函数调用写在函数声明之前也是被允许的，因为javascript存在一个隐式的函数提升。

---

(3)函数的类型

    1.无参无返回值函数

        例子：function  baozi(){}

    2.无参有返回值

        例子：function baozi(){  return '包子';}

    3.有参无返回值

        例子：function  baozi(mianfen,zhurou,dacong){}

    4.有参有返回值

        例子：function  baozi(mianfen,zhurou,dacong){return '包子';}

 

名词解释

返回值：【函数执行结束后】返回到【原本程序中函数所在的位置】,用来替代整个函数的【结果】，被称为函数的返回值。通常使用return关键词来实现。

形式参数：函数在定义的时候写在小括号中的参数被称为形式参数。形式参数只用来在函数内部使用，在函数外部形式参数失效。通常形式参数不用var声明，直接写变量名即可。

实际参数：函数在调用的时候写在小括号中的参数被称为实际参数。

---

(4)函数的作用域(scope)

作用域（scope）指的是变量存在的范围。Javascript只有两种作用域：

全局作用域：变量在整个程序中一直存在，所有地方都可以读取。

函数作用域：变量只在函数内部存在。在函数外部变量失效。

 

和作用域与之对应的，javascript中有两种变量：

全局变量(global variable)：在函数外部声明的变量，它可以在函数内部读取。

局部变量(local variable)：在函数内部定义的变量，外部无法读取。

---

(5)函数的补充说明

a.ECMAScript规定:不能在非函数的代码块中声明函数。

if(a>0){

function func(){}//wrong way!

}

b.可以使用name属性来获取函数名(个人觉得暂时没啥用) //我也

function func() {}

func.name // ‘func'

c.可以使用length属性来获取函数的参数个数

function func(num1, num2) {}

func.length // 2

d.函数中还有一种特殊的函数，叫做自执行函数

(function(){ /* code */ }()); 或 (function(){ /* code */ })();

其特点就是不需要调用就能够自动执行。

---

2.Javascript对象

对象（object）是大括号定义的无序的数据集合，由键值对构成，键与值之间用冒号分隔，大括号末尾要使用分号表示对象定义结束。

对象是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象。此外，JavaScript 允许自定义对象。

语法：var obj = { key : value };     //定义了一个对象，它被赋值给变量obj。   key是“键名”   value是“键值”

 

ps:如果对象内部包含多个键值对，每个键值对之间用逗号分隔。最后一个键值对末尾不用加逗号

var obj = {key1:value1 , key2:value2};

 

对象详解：

(1)键名(对象的属性)    (2)键值    (3)对象的创建    (4)对象属性的读写    (5)对象属性的操作    (6)*对象的引用

---

(1)键名(属性)

键名也被称为属性(property)，对象的所有属性都是字符串，所以加不加引号都可以。

因此上面的代码也可以写成下面这样：

var obj = { 'key': value };

 

但是，如果属性不符合标识符的条件(比如第一个字符为数字，或者含有空格或运算符)，则必须加上引号。

var obj = {

'1p': "Hello World",

'h w': "Hello World",

'p+q': "Hello World"

    };

上面对象的三个属性，都不符合标识名的条件，所以必须加上引号。

ps:JavaScript的保留字可以不加引号直接当作对象的属性。

---

(2)键值

键值是属性所对应的具体的值。javascript的对象的键值可以是任何数据类型。

var obj= {

name: "Frankenstein Add",

age: 18,

sex: "male"

ability: eat();//eat()表示函数

    };

 

ps：如果一个属性的值(ability)为函数，通常把这个属性称为“方法”。它可以像函数那样调用这个属性。

frank.ability();

---

(3)对象的创建

常用： a.直接使用大括号创建对象

一般： b.使用new命令生成一个Object对象的实例

特定： c.使用Object.create方法创建对象（继承的场合用）

 

var obj1 = {};

var obj2 = new Object();

var obj3 = Object.create(null);

 

上面三行语句是等价的，都表示创建了一个没有键值对的空对象。

 

ps：一般来说，第一种采用大括号的写法比较简洁，也是最常用的一种创建对象的写法。第二种采用构造函数的写法清晰地表示了意图，第三种写法一般用在需要对象继承的场合。

---

(4)对象属性的读写

a.读取属性

读取对象的属性,有两种方法:一种是使用点运算符,还有一种是使用方括号运算符。

 

语法：var obj = { key：value }；

    console.log(obj.key);

    console.log(obj['key']);

 

    var frank = { name: 'Frankenstein' };

    console.log(frank.name);//Frankenstein

    console.log(frank['name']);//Frankenstein

描述：实际时获取对象属性所对应的属性值

注意：

    a.需要注意的是，使用方括号读取对象属性的时候需要加引号！

    b.访问对象中不存在的属性时，不会报错而是返回undefined

 

b.写入属性

点运算符用来为对象的属性写入值。

 

语法：var obj = {}；

    obj.key = value;

    console.log(obj.key);

 

  var frank = {};

  frank.name = 'frank';

  console.log(frank[‘name’]);//frank

 

ps：点运算符和中括号运算符都能够给对象的属性赋值,无论属性是否存在(修改属性值)。

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符：

（1）中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

  var obj={

  name:'贝西',

  height:170

  };

  var str='height';

  console.log(obj.str); //undefined

  console.log(obj[str]); //170

(2)中括号运算符可以用纯数字为属性名。点运算符不能。

  var obj={};

  obj[0]='aa';

  obj[1]='bb';

  console.log(obj);

（3）中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。(了解)

var obj={};

obj.document='sxt';

obj[document]='hello';

console.log(obj);

---

(5)对象属性的操作

javascript为对象提供了一系列内置的方法，方便我们更好的操作对象。

 

【Object.keys()】获取对象所有属性

【delete】删除一个属性

【in】检查对象是否包含一个属性

【for in】遍历对象所有属性

【with】操作多个对象属性

---

1.Object.keys()

描述：用来获取对象中所有的属性并构成数组返回

语法：Object.keys(对象)

 

var greenJuPeople = { name: '绿巨人', ability:'发怒变绿' };

console.log(Object.keys(greenJuPeople));//["name", "ability"]

 

ps：【Object.keys()】是一个整体，调用的时候必须整体使用。

---

2.delete

描述：删除对象的一个属性(实际删除的是一对键值对)

语法：delete obj.property

 

    var obj = { key : 'value' };

    Object.keys(obj); // ["key"]

    delete obj.key; // true

    obj.key; // undefined

    Object.keys(obj); // []

 

上面代码表示，一旦使用delete命令删除某个属性，再读取该属性就会返回undefined，而且Object.keys方法返回的该对象的所有属性中，也将不再包括该属性。

 

ps:如果删除一个不存在的属性，delete不报错，而且返回true——无论有没有都是True！。千万引起注意！

    var obj = {};

    delete obj.key; // true

---

3.in

描述：检查对象是否包含一个属性

语法：  key  in obj

 

    var obj = { key : 'value' };

    console.log( 'key' in obj );//true

    console.log( 'value' in obj);//false

ps:检查的是键名，不是键值。如果包含就返回true，否则返回false。

---

4.for in

描述：快速遍历

语法： for(var pro  in obj){...}

注意：循环变量pro表示的是对象的属性名，并不表示属性的值！

 

// 语法：var obj = { key1:value1, key2:value2, key3:value3 };

    for (var pro in obj){

console.log(obj[pro]);

    }

 

ps:循环变量pro表示的是对象的属性名，并不表示属性的值！千万注意！！！！！！

---

5.with

描述：同时操作一个对象的多个属性

语法：with(obj){

         key1 = value1;

         key2 = value2;

         }

    var frank = { name : '', age : 0 };

    with(frank){

name = 'frank';

age = 18;

    }

    console.log(frank.name+frank.age);

ps:with只能够修改对象中已经存在的属性，对于对象中原本不存在的属性with无能为力。

pss:with对于ES6以及ES5中的严格模式都已经禁用了，因为with可能会导致代码更难调试和读取。

---

(6)*对象的引用

描述：如果一个变量指向一个对象，那么这个变量就称为这个对象的引用

注意：对一个对象的对象引用做出的修改，会影响整个对象的状态。

 

如果不同的变量名指向同一个对象，那么它们都称为这个对象的引用。也就是说这些变量共同指向同一个内存地址，修改其中一个变量所指向的值，都会影响到其他所有变量所指向的值。

 

var obj = { fire : 'burn' };

var people1_fire = obj;

var people2_fire = obj;

 

obj.fire = '灭了';

console.log(people1_fire.fire);//灭了

console.log(people2_fire.fire);//灭了

---

#本章节完