【一】JavaScript能力提升---类对象、call()、apply()、bind()-优快云博客

本文链接：https://blog.youkuaiyun.com/zheshiyangyang/article/details/145875152

一、类对象

1.1概念

类对象是一种用于创建和管理对象的架构或概念

1.2定义方式

1.2.1基于ES6类语法的类对象

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person('John', 25);
person1.sayHello();

使用class关键字定义类对象，它使用constructor方法用于初始化实例对象的属性，还可以包含其他方法来定义对象的行为。

1.2.2基于构造函数的类对象

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

Person.prototype.sayHello = function(){
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
}

var p1 = new Person("John", 25);
p1.sayHello();

利用函数作为构造函数来创建类对象。在构造函数内部，使用this关键字来定义实例对象的属性，通过在构造函数的原型上添加方法来定义对象的共享行为。

通过构造函数创建的对象，共享属性和方法

二、类数组对象

2.1概念

类数组对象指拥有“length”属性，且属性名是自然数(索引)的对象，但它并不是真正的数组，不能使用数组的内置方法。

特征：

具有length属性：该属性的值为非负整数，标识类数组对象中元素的数量{0:'a',1:'b',length:2}
自然数属性名：可以通过数组索引的方式访问元素(如obj[0])
不能使用数组的内置方法(push、pop)等

常见的类数组对象：

arguments对象：在非箭头函数内部自然生成，包含了调用函数时传入的所有参数
DOM节点列表：如document.querySelectorAll()返回的NodeList，document.forms、HTMLCollection对象

2.2转换为数组

Array.form()
Array.prototype.slice.call()
Array.prototype.splice.call()
展开运算符(...)

三、innerHTML和outerHTML

3.1概念

innerHTML：DOM属性，用于获取和设置元素内部内容。它会返回或修改元素标签之间的所有HTML代码，不包括元素自身的标签
outerHTML：DOM属性，用于获取自身和所有子元素的完整HTML内容，包括自身

3.2示例

<body>
    <div id="test">
        <p>Hello</p>
    </div>
  <script>
    const div = document.getElementById('test');
    console.log(div.outerHTML);
    console.log(div.innerHTML);
  </script>
</body>

效果：

四、Array的fill()方法和from()方法

4.1fill()

Array.fill()方法用于将一个数组中的所有元素从起始索引到终止索引填充为指定的值()

语法：

arr.fill(value,start)

value：必需，用来填充数组元素的值
start：可选，起始索引，默认为0
end：可选，终止索引，默认为this.length

// 创建一个长度为5的数组，并用0填充
const arr1 = new Array(5).fill(0)
console.log(arr1)

// 从索引1到索引3填充为1
const arr2 = [1,2,3,4,5]
arr2.fill(1, 1, 3)
console.log(arr2)

4.2from()方法

Array.from()方法从一个类似数组或可迭代对象创建一个新的、浅拷贝的数组。

它可以将类数组对象或可迭代对象转换为真正的数组。

语法：

arrayLike：必需，想要转换成数组的类数组对象或可迭代对象
mapFn：可选，可选的映射函数，用于对每个元素进行处理
thisArg：可选，执行mapFn时的this值

// 将字符串转为数组
const str = 'hello'
const arr1 = Array.from(str)
console.log(arr1) // ["h", "e", "l", "l", "o"]

// 将Set转为数组
const set = new Set([1,2,3,4,5])
const arr2 = Array.from(set)
console.log(arr2) // [1,2,3,4,5]

// 使用映射函数
const arr3 = Array.from([1,2,3], x => x * 2)
console.log(arr3) // [2,4,6]

// 将类数组对象转换为数组
function sum()
{
    const args = Array.from(arguments);
    return args.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1,2,3)) // 6

五、apply()、call()、bind()

5.1作用

call、apply、bind作用是：“改变函数执行时的上下文，即改变函数运行时的this指向”。

下面例子中，需要改变this指向：

var name = 'John';
const obj = {
    name:'Jane',
    say:function(){
        console.log(this.name);
    }
}

obj.say(); // Jane
setTimeout(obj.say,0); // John

在setTimeout()中调用的obj.say()方法是被当做“普通函数”来执行，普通函数的this指向window，所以输出John

5.2apply()

apply(thisArg，argsArray)，改变this指向后原函数会立即执行，此方法只是临时改变this指向一次

thisArg：在调用函数时指定的this值。若thisArg为null或undefined，它会被全局对象(window)替代
argsArray：一个数组或类对象，其中的元素会作为参数传递给函数

function f(...args){
    console.log(this,args)
}

let obj = {
    name:'张三'
}

f.apply(obj,[1,2]); // obj, [1, 2]
f([1,2]) // window [1,2

5.3call()

call(thisArg,arg1,arg2,...,argN)，此方法也只是临时改变this指向一次

thisArg：同apply()中的thisArg一样
arg1,arg2,...,argN：传递给函数的参数列表

function f(...args){
    console.log(this,args)
}

let obj = {
    name:'张三'
}

f.call(obj,1,2); // obj, [1, 2]
f(1,2) // window [1,2]

5.4bind()

bind(thisArg,arg1,arg2,...,argN)，改变this指向后不会立即执行，而是返回一个永久改变this指向的函数

thisArg：同apply()中的thisArg一样
arg1,arg2,...,argN：传递给函数的参数列表

function f(...args){
    console.log(this,args)
}

let obj = {
    name:'张三'
}

const bindF = f.bind(obj);
bindF(1,2) // {name: "张三"} [1,2]
f(1,2) // window [1,2]

5.5总结

三者都可以改变函数的this指向
三者都可以传入参数，apply是数组，call是参数列表。apply和call是一次传入，而bind可以分为多次传入
bind是返回绑定this之后的函数，apply、call是立即执行