this用法忘了?看这里

126 阅读4分钟

一、this

①解析器在调用函数每次都会向函数内部传递进一个隐含的参数这个隐含的参数就是this,this指向的是一个对象。
②根据函数调用方式的不同,this会指向不同的对象
1、以函数形式调用时,this永远都是window
2、以方法的形式调用时,this就是调用方法的那个对象


二、构造函数

①构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。

②构造函数和普通函数的调用方式不同,普通函数直接调用,而构造函数需要new关键字来调用。

//构造函数首字母大写
function Person(name, age, gender){
  //将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
  this.name = name;
  this.age = age;
  this.gender = gender;
}
//构造函数new关键字调用
//将新建的对象作为返回值返回
var per = new Person("张三", 18, "男");
console.log(per);

这里的this:

1、当以函数的形式调用时,this就是window

2、当以方法的形式调用时,谁调用方法this就是谁

3、当以构造函数的形式调用时。this就是新创建的哪个对象

③使用instanceof可以检查一个对象是否是一个类的实例。语法:对象 instanceof 构造函数(如果是,返回true,否则返回false)

例:console.log(per instanceof Person);

④所有的对象都是Object的后代,所以任何对象和Object在instanceof检查时都会返回true

例:console.log(per instanceof Object);


三、原型对象

原型:prototype

当函数作为普通函数调用prototype没有任何作用,当以构造函数调用时,所创建的对象中都会有一个隐含的属性。指向该构造函数的原型对象,我们可以通过 proto 来访问该属性

function MyClass() {}

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

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

var mc = new MyClass();

console.log(mc.__proto__ == MyClass.prototype);//true

console.log(mc.a);//123
mc.sayHello();//Hello
  • in —— 使用in检查对象中是否含有某个属性时,如果对象中没有原型中有也会返回true
  • hasOwnProperty() —— 使用hasOwnProperty()检查一个对象自身中是否含有该属性,有则返回true
//创建一个构造函数
function MyClass(){}

//向MyClass原型中添加name属性
MyClass.prototype.name = "原型中的name";

var mc = new MyClass();

//用in检查原型中有也返回true
console.log("name" in mc);//true
//检查自身中是否有name属性
console.log(mc.hasOwnProperty("name"));//false
  • 原型对象也是对象,所以它也有原型,当使用一个对象的属性或方法时,会先在

自身中找——>原型中找——>原型的原型中找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object中依然没有找到,则返会undefined。


四、垃圾回收

在JS中有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也 不能进行垃圾回收的操作,我们需要做的只是要将不再使用的对象设置null即可

var obj = new Object();

obj = null;


五、数组

数组(Array)也是对象,

不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素。

索引:从0开始的整数就是索引

var arr = new Array();

  • 向数组中添加元素

语法:数组[索引] = 值; arr[0] = 1;

  • 读取数组中的元素

语法:数组[索引] 如果读取不存在的索引,他不会报错而是返回undefined

console.log(arr[0]);

  • 获取数组长度,使用length属性来获取数组的长度

语法:数组.length

  • 向数组中最后一个位置添加元素

语法:数组[数组.length] = 值;

  • 数组字面量

语法:[ ] var arr = [ ];

数组中的元素可以是任意的数据类型,可以是对象,也可以是函数。

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

//也可以是对象
var obj = { name: "张三" };
arr[arr.length] = obj;
arr = [{ name: "张三" }, { name: "李四" }, { name: "王五" }];
console.log(arr[1]);

//也可以是一个函数
arr = [function () { alert(1) }, function () { alert(2) }];
arr[0]();
    • 二维数组,这种数组里放数组称为二维数组

arr = [[1, 2, 3], [3, 4, 5], [5, 6, 7]];

console.log(arr[0]);

  • 遍历数组
//创建一个数组
var arr = ["张三", "李四", "王五", "赵六"];

//所谓的遍历数组,就是将数组中所有的元素都取出来
for (var i = 0; i < arr.length; i++) {
      console.log(arr[i]);
}

六、forEach

forEach() 方法 —— 遍历数组

这个方法需要一个函数作为参数,由我们创建但不由我们调用,称为回调函数

浏览器会在回调函数中传递三个参数:

第一个参数,就是当前正在遍历的元素

第二个参数,就是当前正在遍历的元素的索引

第三个参数,就是正在遍历的数组

//创建一个数组
var arr = ["张三", "李四", "王五", "赵六"];

/*
 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
 以实参的形式传递进来,我们可以来定义形参,来读取这些内容
*/
arr.forEach(function (value, index, obj) {
     console.log(value);
}); 

七、数组的方法

  • push() —— 向数组末尾添加一个或多个元素,并返回数组新的长度
  • pop() —— 删除数组最后一个元素,被删除的元素作为返回值返回
  • unshift() —— 向数组开头添加一个或多个元素,返回新长度
  • shift() —— 删除第一个元素,被删除的元素作为返回值返回
  • slice() —— 可以用来从数组中提取指定元素。

参数:①截取开始的位置的索引,包含开始索引
②截取结束的位置的索引,不包含结束索引
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值,如果传递一个负值,则从后往前计算

  • splice() —— 用于删除数组中指定元素,并将被删除的元素作为返回值返回。

参数:①表示开始位置的索引

②表示删除的数量

③及以后,可以传递一些新的元素,这些元素会自动插入到开始位置索引前边

  • concat() —— 可以链接一个或多个数组,并返回新数组
  • join() —— 可以将数组转换为一个字符串
  • reverse() —— 用来反转数组(前面的去后面,后面的去前面)
  • sort() —— 对数组进行排序,默认按照Unicode编码排序

八、call和apply

call()apply()
①这两个方法都是函数对象的方法,需要通过函数对象来调用
②当对函数调用call()和apply()都会调用函数执行,在调用call和apply()可以将 一个对象指定为第一个参数
③call()方法可以将实参在对象之后依次传递
④apply()方法需要将实参封装到一个数组中统一传递
this
1、以函数的形式调用时,this永远都是window
2、以方法的形式调用时,this是调用方法的对象
3、以构造函数的形式调用时,this是新创建的哪个对象
4、使用call和apply调用时,this是指定的哪个对象


九、arguments

在调用函数时,浏览器每次都会传递进两个隐含的参数:
1、函数的上下文对象this
2、封装实参的对象arguments
arguments是一个数组对象(但不是数组),它可以通过索引来操作数据,也可以获取数组长度
在调用函数时,所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
即使不定义形参,也可以通过arguments来使用实参,但是比较麻烦
arguments.length[0] 表示第一个实参
arguments.length[1] 表示第二个实参
它里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在执行的函数的对象

function fun() {
       //console.log(arguments instanceof Array); //false
       //console.log(Array.isArray(arguments)); //false
       //console.log(arguments.length); //2
       //console.log(arguments[1]); //true
       console.log(arguments.callee == fun);
}
fun("hello", true);

十、Date

Date对象,在JS中使用Date对象来表示一个时间

//如果直接使用构造函数创建一个Date对象,则会封装成当前代码执行时间
var d = new Date();

//创建一个指定的时间对象
//需要在指定函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年/ 时:分:秒
var d2 = new Date("06/01/2022 13:14");
  • getDate() —— 获取当前日期对象是几日
  • getDay() —— 获取当前日期对象是周几。返回0-6,0表示周日
  • getMonth() —— 获取当前日期对象月份。返回0-11,0表示1月
  • getFullYear() —— 获取当前日期对象的年份
  • getTime() —— 获取当前日期对象的时间戳,时间戳指的是从格林威治时间1970/1/1 0:0:0到当前日期所花费的毫秒数(1秒=1000毫秒)
    • 利用时间戳测试代码功能性
//利用时间戳来测试代码的执行性能
//获取当前的时间戳
var start = Date.now();

for (var i = 0; i < 100; i++) {
      console.log(i);
}

var end = Date.now();
console.log("执行了" + (end - start) + "毫秒");

十一、Math

它属于一个工具类不用创建对象,里面封装了数学运算相关的属性和方法。如:Math.PI 表示圆周率

  • abs() —— 用来计算一个数的绝对值
  • Math.ceil() —— 对一个数进行向上取整,小数位有值自动进1
  • Math.floor() —— 对一个数进行向下取整,小数部分舍掉
  • Math.round() —— 对一个数四舍五入
  • Math.random() —— 生成一个0-1之间的随机数
    • 生成一个0-x之间的随机数 *Math.round(Math.random()x)
    • 生成一个x-y之间的随机数 Math.round(Math.random()(y-x)+x)*
  • max() —— 取多个数中的最大值
  • min() —— 取多个数中的最小值
  • Math.pow(x, y) —— 返回x的y次幂
  • Math.sqrt() —— 对一个数进行开方

JS基础6.0 后续持续产出中……