JavaScript从零开始学第7天笔记

一.原型链

JavaScript中的原型链是一种用于实现对象继承的机制。每个对象都有一个内部属性[[Prototype]]（也可以通过__proto__访问），它指向该对象的原型对象。原型对象也是一个对象，它拥有自己的原型对象，这样就形成了一个原型链。原型链最终会指向一个特殊的对象null。

当我们访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，在JavaScript中则会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端。
下面是原型链的一些重要概念和用法：

1.构造函数（Constructor Function）

构造函数（Constructor Function）：通过构造函数可以创建对象。构造函数可以指定对象的初始属性和方法，并且可以使用new关键字来创建实例对象。构造函数也有自己的原型对象。

2.原型对象（Prototype Object）

原型对象（Prototype Object）：构造函数的原型对象是一个普通的对象，它包含了共享的属性和方法。我们可以通过给原型对象添加属性和方法，来实现对象之间的共享。每个对象的原型对象都有一个指向上一级原型对象的指针。

3.prototype属性

prototype属性：构造函数的prototype属性指向该构造函数的原型对象。通过修改原型对象，我们可以给构造函数的所有实例对象添加共享的属性和方法。
这个就是看自己构造函数的原型（prototype）

4.__proto__属性

__proto__属性：每个对象都有一个__proto__属性（非标准属性），它指向该对象的原型对象。
我们可以通过obj.__proto__或者Object.getPrototypeOf(obj)来访问对象的原型对象。
__proto__一般用在用构造函数所创建的的对象来查看原来的构造函数的原型（prototype)

5.原型链的查找过程

当我们访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript会沿着原型链向上查找。它会先查找对象本身的原型对象，如果还没有找到，就继续查找上一级原型对象，直到找到该属性或方法或者到达原型链的顶端（即原型对象为null）。

 function Kedou() {
      this.tail = 1
      this.life = 1
      this.sai = 2
    }
    var k1 = new Kedou()
    console.log(k1.tali)//输出1

    function Qingwa() {
      this.tui = 4
      this.fei = 1
    }
    Qingwa.prototype = k1
    var q1 = new Qingwa()
    console.log(q1.tui, q1.tail)//输出4 1


    function Meiwayutou() {
      this.weidao = "辣"
    }
    Meiwayutou.prototype = q1
    var m1 = new Meiwayutou()
    console.log(m1.tui)//输出4
    console.log(m1.life)//输出1

就像这样可以调用原型链里的数据

二.引用数据和基本数据

在JavaScript中，基本数据类型（Primitive Data Types）与引用数据类型（Reference Data Types）有很大的区别。

1.基本数据类型

基本数据类型包括：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）、未定义（Undefined）和Symbol（ES6新增）。
基本数据类型是不可变的，也就是说，对基本数据类型进行操作时，不会改变原始值，而是会返回一个新值。

// 基本数据类型
var str1 = 'Hello';
var str2 = str1; // 复制了str1的值
str2 = 'World';

console.log(str1); // 输出：Hello
console.log(str2); // 输出：World

 var a = 3.14
    a.x = 100//  var n = new Number(3.14);n.x=3.14
    console.log(a.x)//undefined  var m=new Number(3.14); console.log(m.x);  输出undefined

    var str = "hello"
    str.a = 200//var s1=new String("hello")  s1.a=200
    console.log(str.a)//var s2=new String("hello")  s2.a 输出undefined
    console.log(str.length)//输出5

当使用基本数据使用点语法时，会隐式操作用构造函数去创建一个对象，然后用这个创建的的对象去调用这个点语法。

2.引用数据类型

引用数据类型包括：对象（Object）、数组（Array）、函数（Function）和日期（Date）等。
引用数据类型是可变的，对引用数据类型进行操作会改变原始值。

// 基本数据类型
var str1 = 'Hello';
var str2 = str1; // 复制了str1的值
str2 = 'World';

console.log(str1); // 输出：Hello
console.log(str2); // 输出：World

// 引用数据类型
var arr1 = [1, 2, 3];
var arr2 = arr1; // 复制了arr1的引用
arr2.push(4);

console.log(arr1); // 输出：[1, 2, 3, 4]
console.log(arr2); // 输出：[1, 2, 3, 4]

总之：比较基本数据类型的值时，会比较它们的值是否相等。
比较引用数据类型的值时，会比较它们的引用是否相等，即它们是否指向同一个对象。

var num1 = 10;
var num2 = 10;

console.log(num1 === num2); // 输出：true

var obj1 = { name: 'Alice' };
var obj2 = { name: 'Alice' };

console.log(obj1 === obj2); // 输出：false

一道例题

  var a = { n: 1 }
      var b = a
      a.x = a = { n: 2 }
      console.log(a.x)//输出undefined
      console.log(b.x)//输出{n:2}

这道题唯一的难点在于使用连等号时会先将前面的数据选取后再同时给它们赋值。

三.构造函数(constructor)

在 JavaScript 中，constructor 是一个预定义的特殊属性，它指向创建对象实例的构造函数。每个对象实例都会自动拥有一个 constructor 属性，用于指示对象是由哪个构造函数创建的。

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

var person1 = new Person("Alice", 25);
console.log(person1.constructor); // 输出：Person(name, age)
 var arr = [10, 203, 4]
  console.log(arr.constructor)//输出：f Array()

其实在js中每个一个引用数据的创建都有其的构造函数，我们可以使用constructor来看其构造函数，也可以将其构造函数提取出来为我所用。

四.数组的内置对象

在 JavaScript 中，数组是一种内置对象，由Array构造函数创建。数组对象是用于在单个变量中存储多个值的有序集合。它可以包含任意类型的数据，包括数字、字符串、对象等。
数组对象具有许多内置的属性和方法，可以用于对数组进行操作和处理。

1.push方法

在 JavaScript 中，push() 方法是用于将一个或多个元素添加到数组的末尾，并返回新数组的长度。它会修改原数组，将新增的元素追加到数组的最后。
array.push(element1, element2, …, elementN)//语法格式

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出: ['apple', 'banana', 'orange']

let length = fruits.push('grape', 'kiwi');
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'grape', 'kiwi']
console.log(length); // 输出: 5

2.unshift方法

在 JavaScript 中，unshift() 方法用于将一个或多个元素添加到数组的开头，并返回新数组的长度。它会修改原数组，将新增的元素插入到数组的开头。
array.unshift(element1, element2, …, elementN)//语法格式

var fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出: ['apple', 'banana', 'orange']

let length = fruits.unshift('grape', 'kiwi');
console.log(fruits); // 输出: [ 'grape', 'kiwi','apple', 'banana', 'orange']
console.log(length); // 输出: 5

3.pop方法

在 JavaScript 中，pop() 方法用于从数组的末尾删除最后一个元素，并返回被删除的元素。它会修改原数组。
array.pop()//语法格式

var numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 输出: [1, 2, 3, 4, 5]

var lastElement = numbers.pop();
console.log(numbers); // 输出: [1, 2, 3, 4]
console.log(lastElement); // 输出: 5

4.shift方法

在JavaScript中，shift()是一个数组方法，用于移除数组的第一个元素，并返回被移除的元素。它会修改原数组。
array.shift()//语法格式

var numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 输出: [1, 2, 3, 4, 5]

var lastElement = numbers.shift();
console.log(numbers); // 输出: [2, 3, 4,5]
console.log(lastElement); // 输出: 1

5.concat方法

在JavaScript中，concat()是一个数组方法，用于将两个或多个数组合并成一个新数组。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = [7, 8, 9];

var array4 = array1.concat(array2, array3);

console.log(array4); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]

6.copyWithin方法

copyWithin是JavaScript中Array对象的一个方法。它用于从数组中复制元素到指定位置。
array.copyWithin(target, start, end)语法模板
参数：
target：要复制到的目标位置，必需。
start：复制的起始位置，可选，默认为0。
end：复制的结束位置（不包括该位置的元素），可选，默认为数组的长度。

var array = [1, 2, 3, 4, 5];

array.copyWithin(0, 3); // 将数组中从索引3开始的元素复制到索引0开始的位置
console.log(array); // 输出 [4, 5, 3, 4, 5]

array.copyWithin(1, 2, 4); // 将数组中从索引2到索引4之间的元素复制到索引1开始的位置
console.log(array); // 输出 [4, 3, 4, 4, 5]

7.toSring方法

toString()是JavaScript中Object和Array对象的一个方法。它返回一个表示该对象的字符串。
在Object对象上调用toString()方法时，它会返回对象的字符串表示，格式为[object Object]。

var obj = {name: "John", age: 30};
console.log(obj.toString()); // 输出 [object Object]
var array = [1, 2, 3, 4, 5];
console.log(array.toString()); // 输出 1,2,3,4,5

8.join方法

在JavaScript中，join()是一个数组方法，用于将数组中的所有元素连接成一个字符串。
array.join(separator)
参数：separator：可选，是一个字符串，用于指定连接数组元素时使用的分隔符。如果省略该参数，则默认使用逗号作为分隔符。
返回值：返回一个由数组元素组成的字符串。

var fruits = ["apple", "banana", "orange"];
var joinedString = fruits.join(", ");
console.log(joinedString); // 输出：apple, banana, orange

9.splice方法

在JavaScript中，splice()是一个数组方法，用于修改数组的内容，可以删除、插入或替换数组元素。
语法：array.splice(start, deleteCount, item1, item2, …)
参数：
start：必需，一个整数，指定修改的起始位置（索引）。
deleteCount：可选，一个整数，指定要删除的元素数量。如果省略该参数，则删除start位置及之后的所有元素。
item1, item2, …：可选，要插入或替换的新元素。
返回值：返回一个包含被删除元素的数组（如果有删除操作）。

var fruits = ["apple", "banana", "orange"];
var removedItems = fruits.splice(1, 1, "grape", "melon");
console.log(fruits); // 输出：["apple", "grape", "melon", "orange"]
console.log(removedItems); // 输出：["banana"]

10.slice方法

在JavaScript中，slice()是一个数组方法，用于从原数组中提取出指定的一段元素，返回一个新的数组，而不会修改原数组。

语法：array.slice(start, end)
参数：
start：可选，一个整数，指定提取的起始位置（索引）。如果省略该参数，将从索引0开始提取。
end：可选，一个整数，指定提取的结束位置（索引）。提取的结果包括起始位置的元素，但不包括结束位置的元素。如果省略该参数，将提取到数组的末尾。
返回值：
返回一个包含被提取元素的新数组。

var fruits = ["apple", "banana", "orange", "grape", "melon"];
var newFruits = fruits.slice(1, 4);
console.log(newFruits); // 输出：["banana", "orange", "grape"]

11.indexOf方法

在JavaScript中，indexOf()是一个字符串和数组方法，用于查找某个指定的元素在字符串或数组中的第一个出现位置的索引。
语法：string.indexOf(searchValue, startIndex)
参数：
searchValue：要查找的值。
startIndex：可选，从该索引位置开始查找，默认为0。
返回值：
如果找到了指定的值，返回该值在字符串中的第一个出现位置的索引。
如果没有找到指定的值，返回-1。

//对于数组
var fruits = ["apple", "banana", "orange", "grape", "melon"];
var index = fruits.indexOf("grape");
console.log(index); // 输出：3
//对于字符串
var sentence = "I love JavaScript!";
var index = sentence.indexOf("love");
console.log(index); // 输出：2

12.sort方法

在JavaScript中，sort()是一个数组方法，用于对数组中的元素进行排序。
语法：array.sort(compareFunction)
参数：
compareFunction：可选，用于指定元素之间的排序顺序的函数。如果不提供该参数，数组元素将按照默认的排序顺序进行排序（即按照字符串的Unicode码点进行排序）。
返回值：
排序后的数组。注意，sort()方法会直接修改原始数组，并返回修改后的数组，而不是创建一个新的数组。

var numbers = [5, 2, 8, 1, 10];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // 输出：[1, 2, 5, 8, 10]

在上述示例中，numbers.sort()对数组numbers进行排序。由于没有指定比较函数，所以默认使用字符串的Unicode码点进行排序。由于数字的字符串表示法是按照字符顺序进行排序的，因此在默认情况下，sort()方法会得到不正确的排序结果。为了正确排序数字，我们提供了一个比较函数 function(a, b) { return a - b; }，该函数按照升序排列数字。最后，通过console.log()输出排好序的数组numbers。