【JavaScript】js高级第二天(笔记总结)

itpeilibo

已于 2023-03-05 20:10:04 修改

阅读量158

点赞数 2

分类专栏： javaScript高级文章标签： javascript 前端

于 2022-05-19 23:28:30 首次发布

本文链接：https://blog.csdn.net/weixin_46862327/article/details/124874057

版权

javaScript高级专栏收录该内容

18 篇文章 1 订阅

订阅专栏

JavaScript高级笔记	地址
🔥JavaScript高级第一天	http://t.csdn.cn/BTARI
🔥JavaScript高级第三天	http://t.csdn.cn/Pp8W0
🔥JavaScript高级第四天	http://t.csdn.cn/Ku7pc
🔥JavaScript高级第五天	http://t.csdn.cn/3bIRW

JavaScript高级第二天

今日目标

能够使用构造函数创建对象
能够说出原型的作用
能够说出访问对象成员的规则
能够使用ES5新增的一些方法

一、构造函数和原型

1、概述

在典型的 OOP （面向对象）的语言中(如 Java)，都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。

ES6全称 ECMAScript 6.0，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。在 ES6之前，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式：

1、对象字面量

var obj = {};

2、new Object()

var obj = new Object();

3、自定义构造函数

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

2、构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数时要注意以下两点:

1、构造函数用于创建某一类对象，其首字母要大写

2、构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情：（面试题）

在内存中创建一个新的空对象。
将空对象的原型指向构造函数的原型
让this指向这个新的对象
返回这个新对象（所以构造函数里面不用return）

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。

通过这两种方式添加的成员，就分别称为静态成员和实例成员。

静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问

实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

3、构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题

function Star(uname,age){
            this.uname = uname ;
            this.age = age ;
            this.sing = function() {
                console.log('我会唱歌');
            }
        }
        var ldh = new Star('刘德华',18)
        var zxy = new Star('张学友',18)
        console.log(ldh.sing === zxy.sing); //false

在这里插入图片描述

我们希望所有的对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢?

4、构造函数原型 `prototype`

构造函数通过原型分配的函数是所有对象所共享的

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法

问题：

原型是什么 ?
- 一个对象，我们也称为 prototype 为原型对象
原型的作用是什么 ?
- 共享方法

 function Star(uname,age){
            this.uname = uname ;
            this.age = age ;
            this.sing = function() {
                console.log('我会唱歌');
            }
        }
        Star.prototype.song = function(){
            console.log('中国人');
        }
        var ldh = new Star('刘德华',18)
        var zxy = new Star('张学友',18)
        console.log(ldh.sing === zxy.sing); //false
        console.log(ldh.song === zxy.song); //true

5、对象原型 `proto`

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。

__proto__ 对象原型和原型对象 prototype 是等价的
__proto__ 对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

在这里插入图片描述

6、constructor 构造函数

对象原型 ( __proto__ ) 和构造函数 ( prototype ) 原型对象里面都有一个属性 constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。

constructor 的作用主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

7、构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

8、原型链

在这里插入图片描述

9、 JavaScript 的成员查找机制(规则)

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

10、原型对象this指向

构造函数中的 this 指向我们实例对象
原型对象里面放的是方法，这个方法里面的 this 指向的是这个方法的调用者，也就是这个实例对象

11、扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

注意：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。

二、继承

ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

1、call() 方法

调用这个函数，并且修改函数运行时的 this 指向

语法：

fun.call(thisArg, arg1, arg2, ...)

thisArg :当前调用函数 this 的指向对象
arg1，arg2:传递的其他参数

2、借用构造函数继承父类型属性

核心原理：通过 call() 把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型的属性。

代码：

// 1、父构造函数
function Father(uname, age) {
	// this 指向父构造函数的对象实例
  this.uname = uname;
	this.age = age;
}
// 2、子构造函数
function Son(uname, age, score) {
	// this 指向子构造函数的对象实例
  // 3、使用call方式实现子继承父的属性 
  Father.call(this, uname, age); 
  this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);

3、借用原型对象继承父类型方法

一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。

核心原理：

将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
将子类的 constructor 从新指向子类的构造函数

在这里插入图片描述

三、类的本质

class本质还是function
类的所有方法都定义在类的 prototype 属性上
类创建的实例，里面也有 __proto__ 指向类的 prototype 原型对象
所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
所以ES6的类其实就是语法糖

语法糖：语法糖就是一种便捷写法．简单理解，有两种方法可以实现同样的功能，但是一种写法更加清晰、方便那么这个方法就是语法糖

四、ES5 中的新增方法

1、ES5 新增方法概述

ES5 中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：

数组方法
字符串方法
对象方法

2、数组方法

迭代(遍历)方法：forEach()、map()、filter()、some()、every();

forEach()

语法：

array.forEach(function(currentValue, index, arr))

参数说明：

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

代码：

// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (value, index, array) {
  console.log("每个数组元素" + value);
  console.log("每个数组元素的索引号" + index);
  console.log("数组本身" + array);
  sum += value;
});
console.log(sum);

filter()

语法：
```
array.filter(function(currentValue, index, arr))
```
参数说明：

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

注意：

1、filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组

2、注意它直接返回一个新数组

代码：
```
 // filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function (value, index, array) {
  // return value >= 20;
  return value % 2 == 0;
});
console.log(newArr);
```
some()

语法：
```
array.some(function(currentValue, index, arr))
```
参数说明：

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

注意：

1、some() 方法用于检测数组中的元素是否满足指定条件，通俗点查找数组中是否有满足条件的元素

2、注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false

3、如果找到第一个满足条件的元素，则终止循环，不在继续查找

代码：
```
// some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function (value) {
  return value > 30;
});
console.log(flag);

var arr1 = ["red", "pink", "blue"];
var flag2 = arr1.some(function (value) {
  return value == "purple";
});
console.log(flag2);
```
map()

语法：
```
array.map(function(currentValue, index, arr))
```
参数说明：

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

注意：

1、map() 方法创建一个新的数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，主要用来处理数组元素

2、注意它直接返回一个新数组

3、不会改变原数组

代码：
```
// map 处理数组元素
var arr = [1, 4, 9];
var  newArr = arr.map(function (num) {
  return num * 2;
});
console.log(arr);
console.log(newArr);
```
every()

语法：
```
array.every(function(currentValue, index, arr))
```
参数说明：

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

注意：

1、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试

2、注意它返回值是布尔值，如果所有元素满足条件，就返回 true，反之则返回 false

3、every() 方法需要判断多有数组元素

代码：
```
// every() 查询数组中是否全部满足条件
function callback(value, index, array) {
  return value >= 10;
}
var arr = [12, 5, 8, 130, 44];
var flag = arr.every(callback);
console.log(flag);

var arr2 = [12, 54, 18, 130, 44];
var flag2 = arr2.every(callback);
console.log(flag2);
```

查询商品案例

定义数组对象数据

// 利用新增数组方法操作数据
var data = [
  {
    id: 1,
    pname: "小米",
    price: 3999,
  },
  {
    id: 2,
    pname: "oppo",
    price: 999,
  },
  {
    id: 3,
    pname: "荣耀",
    price: 1299,
  },
  {
    id: 4,
    pname: "华为",
    price: 1999,
  },
];

获取元素

// 1. 获取相应的元素
var tbody = document.querySelector("tbody");
var search_price = document.querySelector(".search-price");
var start = document.querySelector(".start");
var end = document.querySelector(".end");
var product = document.querySelector(".product");
var search_pro = document.querySelector(".search-pro");

把数据渲染到页面中

// 2. 把数据渲染到页面中
function setData(mydata) {
	// 更新前清空数据  
  tbody.innerHTML = "";
  mydata.forEach(function (value) {
    var tr =
        "<tr><td>" +
        value.id +
        "</td><td>" +
        value.pname +
        "</td><td>" +
        value.price +
        "</td></tr>";
    tbody.insertAdjacentHTML("beforeend", tr);
  });
}

根据价格查询商品

// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener("click", function () {
  var newData = data.filter(function (value) {
    return value.price >= start.value && value.price <= end.value;
  });
  setData(newData);
});

根据商品名称查找商品

// 4. 根据商品名称查找商品
// 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高
search_pro.addEventListener("click", function () {
  var arr = [];
  data.some(function (value) {
    if (value.pname === product.value) {
      arr.push(value);
      return true;
    }
  });
  setData(arr);
});

some() 和 forEach() 区别
- 如果查询数组中唯一的元素，用some方法更合适，在some 里面遇到 return true 就是终止遍历迭代效率更高
- 在forEach 里面 return 不会终止迭代

3、字符串方法

trim() 方法会从一个字符串的两端删除空白字符。

语法：

str.trim()

trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。

5、对象方法

Object.keys()

Object.keys() 方法返回一个所有元素为字符串的数组

语法：

Object.keys(obj)

效果类似 for…in

输出对象中值大于 2 的 key 的数组

代码：

// 用于获取对象自身所有的属性
var obj = {
  id: 1,
  pname: "小米",
  price: 1999,
  num: 2000,
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function (value) {
  console.log(value);
});

Object.defineProperty()

Object.defineProperty() 定义新属性或修改原有的属性

语法：
```
Object.defineProperty(obj, prop, descriptor)
```
参数说明：

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

Object.defineProperty() 第三个参数 descriptor 说明：

descriptor 是一个对象

value：设置属性的值
writable：值是否可以重写。true | false 默认为 false
enumerable：目标属性是否可以被枚举。true | false 默认为 false
configurable：目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为 false

itpeilibo

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】js高级第二天(笔记总结)

JavaScript高级第二天今日目标能够使用构造函数创建对象能够说出原型的作用能够说出访问对象成员的规则能够使用ES5新增的一些方法一、构造函数和原型1、概述在典型的 OOP （面向对象）的语言中(如 Java)，都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。ES6全称 ECMAScript 6.0，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 E
复制链接

扫一扫