『笔记』JavaScript基础学习笔记 3

this

解析器（浏览器）在调用函数时每次都会向函数内部传递进一个隐含的参数

1、this的定义

{alert type="success"}

这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同，this会指向不同的对象
1、 以函数的形式调用时，this永远都是window
2、 以方法的形式调用时，this就是调用方法的那个对象
{/alert}

function fun(){
  //console.log("a=" +a+",b="+b);
  console.log(this.name);
}
fun();//输出object.window

//创建一个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//console.log(obj.sayName == fun);//输出true

var name = "全局的name属性"
obj.sayName();//输出object.object   [name:"孙悟空",sayName:fun]
//以函数形式调用,this时window
fun();
//以方法的形式调用，this是调用方法的对象
obj.sayName();
obj2.sayName();

2、this补充

//创建一个name变量
var name = "全局";

//创建一个fun()函数
function fun(){
  console.log(this.name);
}

//创建两个对象
var obj = {
  name:"孙悟空",
  sayName:fun
};

var obj2 = {
  name:"沙和尚",
  sayName:fun
};

//调用obj.sayName()时输出obj的名字
obj.sayName();//输出 孙悟空
obj2.sayName();//输出 沙和尚

对象

1、使用工厂方法创建对象

可以使用该方法大批量创建对象

使用工厂方法创建的对象使用的构造函数都是Object

所以创建的对象都是Object类型，导致无法区分出多种不同类型的对象

function createPerson(name,age,gender){
  //创建一个新的对象
  var obj = new Object();
  //向对象中添加属性
  obj.name = name;
  obj.age = age;
  obj.gender = gender;
  obj.sayName = function(){
    alert(this.name);
  }
  
  //将新的对象返回
  return obj;
}
var obj2 = createPerson("猪八戒",18,"男");
var obj3 = createPerson("白骨精",17,"女");
var obj4 = createPerson("蜘蛛精",16,"女");

console.log(obj2);
console.log(obj3);
console.log(obj4);
obj2.sayName();

2、构造函数

{alert type="success"}

构造函数就是一个普通函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用的方式不同，普通函数是直接调用， 而构造函数需要使用 new 关键字俩调用
使用同一个构造函数创建的对象称为一类对象，也将一个构造函数称为一个类
将通过一个构造函数创建的对象称为该类的实例
{/alert}

构造函数的执行流程：

{alert type="warning"}

立刻创建一个新的对象
将新建的对象设置为函数中的this
逐行执行函数中的代码
将新建的对象作为返回值返回
{/alert}

使用同一个构造函数创建的对象，称为一类对象，也将构造函数称为一个类

{alert type="success"}

通过一个构造函数创建的对象，称为该类的实例
{/alert}

使用instanceof可以检查一个对象是否是一个类的实例

语法： 对象 instanceof 构造函数

{alert type="success"}

如果是返回true，否则返回false
所有的对象都是Object的后代
任何对象和Object作instanceof检查时都会返回true
{/alert}

//创建一个构造函数，专门用来创建Person对象
var per = new Person();
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayNmae = function(){
    alert(this.name);
  };
}

var per = new Person("孙悟空",18，"男")
var per = new Person("玉兔精",17，"女")

console.log(per);

console.log(per instanceof Person);

this的情况：

{alert type="error"}

1、当以函数的形式调用时，this是window
2、当以方法的形式调用时，谁调用方法this就是谁
3、当以构造函数的形式调用时，this就是新创建的那个对象
{/alert}

3、构造函数修改

在Person构造函数中，为每一个对象都添加了一个sayName方法

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = function(){
    alert("Hello大家好，我是："+this.name);
  };
}
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();

方法是在构造函数内部创建的，构造函数每执行一次就会创建一个新的sayName方法， 也就是所有实例的sayName都是唯一的
会导致构造函数每执行一次就会创建一个新的方法

可以将将sayName方法在全局作用域中定义（尽量不要将函数定义在全局作用域）

{alert type="info"}

将函数定义在全局作用域会污染全局作用域的命名空间
而且定义在全局作用域中也很不安全
{/alert}

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向对象中添加一个方法
  this.sayName = fun;
  };
}
//将sayName方法在全局作用域中定义
function fun(){
    alert("Hello大家好，我是："+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName();

4、原型对象

原型 prototype

创建的每一个函数，解析器都会向函数中添加一个属性prototype

{alert type="success"}

这个属性对应着一个对象，这个对象就是原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，可以通过 __proto__ 来访问该属性
原型对象就相当于一个公共的区域，所以同一个类的实例都可以访问到这个原型对象
可以将对象中共有的内容，统一设置到原型对象中
当访问对象的一个属性时，它会先在对象自身找，如果有则直接使用，如果没有则会向原型对象中选择，如果找到会直接使用

{/alert}

function MyClass(){
  
}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
  alert("hello");
};

var mc = new MyClass();

console.log(MyClass.prototype);
console.log(mc.__proto__ == MyClass.prototype);//输出true
console.log(mc.a);//输出123
//向mc中添加a属性
mc.a = "我是mc中的a";
console.log(mc.a);//输出 我是mc中的a

mc.sayHello();//输出 弹窗hello

创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中

这样不用分别为每一个对象添加，就可以使每个对象都具有这些属性和方法，也不会影响到全局作用域

例：

//创建一个Person构造函数
function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  //向中添加一个方法
  // this.sayName = fun;
  };
}
//向原型中添加sayName方法
Person.prototype.sayName = function(){
    alert("Hello大家好，我是："+this.name);
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per = new Person("猪八戒",19,"男");

per.sayName(); // 输出弹窗

补充：

{alert type="success"}

使用 in 检查对象中是否含有某个属性时，如果对象中没有单数原型中有，也会返回true
可以使用对象的 hasOwnProperty() 来检查对象自身是否含有该属性
使用该方法只有当对象自身含有该属性时才会返回true
原型对象也是对象，所以他也有原型
当使用一个原型一个对象的属性或方法时，会先在自身中寻找，自身中如果有则直接使用，如果没有则去原型对象中寻找，如果原型对象中有则使用，如果没有则去原型的原型中寻找，直到找到Object对象的原型
Object对象的原型没有原型，如果在Object的原型中依然没有找到则返回undefined

{/alert}

//创建一个构造函数
function MyClass(){
  
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的name";

var mc = new MyClass();
console.log(mc.name);
//使用in检查对象中是否含有某个属性时，如果对象中没有单数原型中有，也会返回true
console.log("name" in mc); //输出 true
//可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性
//使用该方法只有当对象自身含有该属性时才会返回true
console.log(mc.hasOwnProperty("name"));//返回false
console.log(mc.hasOwnProperty("hasOwnProperty"));//返回false
console.log(mc.__protp__.hasOwnProperty("hasOwnProperty"));//输出false
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出true

5、toString

{alert type="success"}

当直接在页面中打印一个对象时，实际上是输出的对象的 toString() 方法的返回值
如果希望在输出对象时不输出 [object Object] ，可以为对象添加一个 toString() 方法
{/alert}

function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
}

//修改Person原型中的toString
Person.prototype.toString = function(){
  return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]"
};

//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");

//console.log(per);
//console.log(per.toString);//与上面相同
/*输出Person[name=孙悟空,age=18,gender=男]
per.toString = function(){
  return "Person[name="+this.name",age="+this.age",gender="+this.gender"]"
}; */

var result = per.toString();
//console.log("result = "+result);
//console.log(per.__pro__.__pro__.hasOwnProperty("toString"));//返回true

console.log(per);
console.log(per2);

6、垃圾回收（GC）

当一个对象没有任何的变量或者属性对它进行引用时，将永远无法操作该对象，此时这种对象就是一个垃圾
这种对象过多会占用大量的内存空间，导致程序运行过慢，所以这种垃圾必须进行清理

{alert type="success"}

程序运行过程中会产生垃圾，垃圾积攒过多以后，会导致程序运行的速度过慢
所以需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁
不需要也不能进行垃圾回收的操作， 要做的只是将不再使用的对象设置null即可
{/alert}

//创建一个对象
var obj = new Object();
//对对象进行各种操作。。。。
obj = null;

{nextPage/}

内建对象

对象的类型：内建对象、宿主对象、自定义对象

一、数组

1、数组（Array）的简介

{alert type="success"}

数组也是一个对象，和普通对象功能类似，也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的
索引（index）：从0开始的整数就是索引
数组的存储性能比普通对象要好 ，所以在开发中经常使用数组来存储一些数据
{/alert}
向数组中添加元素，语法： 数组[索引] = 值
读取数组中的元素，语法： 数组[索引]

{alert type="error"}

如果读取不存在的索引，不会报错而是返回undefined
可以使用 length 属性来获取数组的长度（元素的个数），语法： 数组.length
对于连续的数组，使用 length 属性可以获取数组的长度（元素的个数）
对于非连续的数组，使用 length 属性会获取数组的最大索引+1
尽量不要创建非连续的数组,会空出不存在的元素的位置，占用内存
向数组的最后一个位置添加元素，语法： 数组[数组.length] = 元素;
{/alert}

//创建数组对象
var arr = new Array();
//使用typeof检查一个数组时，会返回Object
console.log(typeof arr);
//向数组中添加元素
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 25;
//arr[10] = 21;
//arr[100] = 210;
//console.log(arr[3]);//输出undefined
//获取数组的长度
console.log(arr.length);
console.log(arr);

//修改length
/* 如果修改的length大于原长度，则会空出多出的元素
如果修改的length小于原长度，则会删除多出的元素
*/
//arr[10] = 21;
arr[2] = 22;

//向数组的最后一个位置添加元素
arr[arr.length] = 20;

console.log(arr.length);
console.log(arr);

2、数组字面量

使用字面量来创建数组，语法：[]

{alert type="success"}

使用字面量创建数组时，可以在创建时就指定数组中的元素
使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
元素之间使用 , 隔开
数组中的元素可以是任意的数据类型，也可以是对象，亦可以是一个函数
{/alert}

//var arr = new Array();
/* 无意义
arr[0] = 123;
arr.hello = "abc";
console.log(arr.hello);
*/
//使用字面量来创建数组
//var arr = [];
var arr = [1,2,3,4,5,6,10];

console.log(arr[1]);
console.log(arr.length);

var arr = new Array(10,20,30);
console.log(arr2);

//创建一个数组中只有一个元素10
arr = [10];

//创建一个长度为10的数组
arr2 = new Array(10);

console.log(arr[0]);
console.log(arr2);

//数组中的元素可以是任意的数据类型
arr = [10,"hello",true,null,undefined];

var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]
console.log(arr[1].name);

arr = [function(){alert(1)},function({alert(2)})];
//console.log(arr);
arr[0]();

//数组中可以放数组，如下这种数组称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);

3、数组的方法

（1） `push()` ：

语法： 数组.push(参数一,参数二,参数N);

可以向数组的末尾添加一个或多个元素，并返回数组新的长度

{/alert}{alert type="success"}

可以将要添加的元素作为方法的参数传递，这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精");

console.log(arr);
console.log("result = "+result);

（2） `pop()` :

语法： 数组.pop();

该方法可以删除啊数组的最后一个元素，并将被删除的元素作为返回值返回，删除几次就写几次

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");

arr.pop();
arr.pop();
console.log(arr);
console.log("result = "+result);

（3） `unshift()`

语法： 数组.unshift(参数一,参数二，参数N);

{alert type="success"}

向数组开头添加一个或多个元素，并返回新的数组长度
向前边插入元素以后，其他的元素索引会依次调整
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");

arr.unshift("牛魔王","二郎神");
console.log(arr);
console.log("result = "+result);

（4） `shift()`

语法： 数组.shift();

可以删除数组的第一个元素，并将被删除的元素作为返回值返回,要删除几个就写几个

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");

arr.shift();
console.log(arr);

result = arr.shift();
console.log("result = "+result);

（5） `slice()`

语法： 数组.slice(参数一,参数二);

可以从已有的数组中返回选定的元素

参数：

截取开始的位置的索引，包含开始索引
截取结束的位置的索引，不包含结束索引

{alert type="success"}

该方法不会改变原数组，而是将截取到的元素封装到一个新的数组中返回
第二个参数可以省略不写，此时会截取从开始索引以后的所有元素
索引也可以传递一个负值，如果传递负值则从后往前计算，例：-1：倒数第一个
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];

var result = arr.slice(0,2);
console.log(result);

（6） `splice()`

语法： 数组.splice(参数一,参数二,参数三,参数N);

可以用于删除数组中的指定元素，并向数组中添加新的元素

参数：

第一个：开始的位置的索引
第二个：删除的数量
第三个及以后的参数可以传递一些新的元素，这些元素将会自动插入到开始位置的索引前面

{alert type="success"}

使用该方法会改变原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];

var result = arr.splice(1,0,"牛魔王","红孩儿");
console.log(result);

（7）数组去重练习

//创建一个数组
var arr = [1,2,3,2,1,3,4,2,5];
//去除数组中重复的数字

解法：

//创建一个数组
var arr = [1,2,3,2,2,1,3,4,2,5];
//去除数组中重复的数字
//获取数组中的每一个函数
for(var i=0; i<arr.lenth; i++){
  //console.log(arr[i]);
  for(var j=i+1; j<arr.lenth; j++){
    //console.log(arr[j]);
    //判断两个元素的值是否相等
    if(arr[i] == arr[j]){
      //如果相等则证明出现了重复的元素，删除j对应的元素
      arr.splice(j,1);
      //当删除了当前j所在的元素以后，后面的元素会自动补位
      //此时将不会再比较这个元素，需要再比较一次j所在位置的元素
      //当删除一个元素后，使j自减
      j--;
    }
  }
} 

console.log(arr);

（8） `concat()`

语法： 数组.concat();

连接两个或多个数组，并将新的数组返回

{alert type="success"}

该方法不会改变原数组，可以添加数组，也可以添加元素
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr2 = ["二郎神","太乙真人","太上老君"];

var result = arr.concat(arr2,arr3,"牛魔王");

console.log(result);

（9） `join()`

语法： 数组.join("连接符");

该方法可以将数组转换为一个字符串

{alert type="success"}

该方法不会改变原数组，而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
如果不指定连接符，则默认使用 , 连接
{/alert}

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];

var result = arr.join("-");

console.log(typeof result);//输出string
console.log(result);//输出 孙悟空-猪八戒-沙和尚

（10） `reverse()`

语法： 数组.reverse();

该方法用来反转数组（前边的去后边，后边的去前边）

该方法会直接修改原数组

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];

arr.reverse();
console.log(arr);//输出 沙和尚,猪八戒,孙悟空

（11） `sort()`

语法： 数组.sort();

该方法可以用来对数组中的元素进行排序

该方法会影响原数组，默认会按照Unicode编码进行排序

{alert type="error"}

使用sort()排序时，即使对于纯数字进行排序，也会按照Unicode编码来排序，可能会得到错误的结果
可以指定排序的规则
可以在sort()添加一个回调函数，来制定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器会根据回调函数的返回值来决定元素的顺序
1. 如果返回一个大于0的值，则元素交换位置

2. 如果返回一个小于0的值，则元素位置不变
3. 如果返回一个等于0的值，则认为两个元素相等，也不交换位置

{/alert}

//创建一个数组
var arr = [5,4,2,1,3,6,8,7];

arr.sort();
console.log(arr);//输出 a,b,d
//arr.reverse();
console.log(arr);//输出 d,b,a

arr.sort(function(a,b){
  // if(a>b){
  //   return 1;
  // }else if(a<b){
  //   return -1;
  // }else{
  //   return 0;
  // }
  //升序排列
  return a - b;
  //降序排列
  return b - a;
});
console.log(arr);

4、数组的遍历

遍历数组：就是将数组中的所有元素都取出来

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
/*console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
*/
for(var i=0; i<arr.length; i++){
  console.log(arr[i]);
}

5、数组练习

创建一个函数，可以将perArr中的满18岁的Person提取出来，然后封装到一个新的数组中并返回，arr 形参：要提取信息的数组

function Person(name,age,gender){
  this.name = name;
  this.age = age;
}

//修改Person原型中的toString
Person.prototype.toString = function(){
  return "Person[name="+this.name+",age="+this.age+"]"
};
//创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);

//将这些person对象放入到一个数组中
var perArr = [per,per2,per3,per4,per5];

/*创建一个函数，可以将perArr中的满18岁的Person提取出来，然后封装到一个新的数组中并返回
arr 形参，要提取信息的数组
*/
function getAdult(arr){
  //创建一个新的数组
  var newArr = [];
  
  //遍历arr，获取arr中的Person对象

  //判断Person对象的age是否大于等于18

  //如果大于等于18，则将这个对象添加到newArr中

  //将新的数组返回
  return newArr;
}

var result = getAdult(perArr);
console.log(result);

解法：

//遍历arr，获取arr中的Person对象
for(var i=0; i<arr.length; i++){
  var p = arr[i];
  //判断Person对象的age是否大于等于18
  if(p.age>=18){
    //如果大于等于18，则将这个对象添加到newArr中
    newArr.push(p);
  }
}

6、 `forEach()`

一般都是使用for循环遍历数组，JS中还提供了一个 forEach() 方法来遍历数组，但是只支持IE8以上浏览器，所以需要兼容IE8尽量不要使用该方法

{alert type="success"}

forEach()方法需要一个函数作为参数
这种函数有我们创建单数不由我们调用的，称为回调函数
数组中有几个元素，函数就会执行几次，每次执行时浏览器会将遍历到的元素以实参的形式传递进来，可以定义形参来读取这些内容
浏览器会在回调函数中传递三个参数
第一个参数：当前正在遍历的元素，第二个参数：当前正在遍历的元素的索引，第三个参数：当前正在遍历的数组
{/alert}

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
arr.forEach(function(value,index,obj){
  console.log("value ="+value);
  console.log("index ="+index);
  console.log("obj ="+obj);
});

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »

『笔记』JavaScript基础学习笔记 3

this

1、this的定义

2、this补充

对象

1、使用工厂方法创建对象

2、构造函数

3、构造函数修改

4、原型对象

5、toString

6、垃圾回收（GC）

内建对象

一、数组

1、数组（Array）的简介

2、数组字面量

3、数组的方法

（1） push() ：

（2） pop() :

（3） unshift()

（4） shift()

（5） slice()

（6） splice()

（7）数组去重练习

（8） concat()

（9） join()

（10） reverse()

（11） sort()

4、数组的遍历

5、数组练习

6、 forEach()

（1） `push()` ：

（2） `pop()` :

（3） `unshift()`

（4） `shift()`

（5） `slice()`

（6） `splice()`

（8） `concat()`

（9） `join()`

（10） `reverse()`

（11） `sort()`

6、 `forEach()`