2025-3.19-学习复盘

最新推荐文章于 2025-12-16 22:22:21 发布

原创最新推荐文章于 2025-12-16 22:22:21 发布 · 580 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #原型模式

new关键字的作用【背】

实例化创建对象

1.自动创建了一个空对象 {}

2.将空对象指向 this this ={}

将this return返回出来

  function Phone(type,price,color,system,size){
      //1+2   this = {}
      this.type = type;
      this.price = price;
      this.color = color;
      this.system = system;
      this.size = size;
      this.start = function(){
           console.log('已经开机');  
      }
    //加上new关键字后 相当于 
      //return this
  }
  
  const p1 = new Phone('华为',3500,'白色','鸿蒙os',512)
  const p2 = new Phone('华为',3500,'白色','鸿蒙os',512)

this 在构造函数中其实就是实例对象

高阶JS-原型与原型链

原型
原型链
this指向问题
借用this
类的继承

原型图解

每个构造函数都有一个原型空间叫做显式原型 prototype

显式原型protopyte是一个对象，有一个constructor属性，指向构造函数本身

每一个实例化对象都有一个隐式原型__proto__ 指向自己的构造函数的显式原型prototype

原型链

实例对象的方法或属性值的查找规则：（根据原型__proto__）逐级向上，就近原则

首先在自己本身对象中查找是否有这个属性或方法，如果有就直接使用

如果本身没有属性或方法，会自动的去原型空间找是否有，如果有就直接使用

  
  p1.toString == p1.__proto__.__proto__.toString

this指向问题-6个

全局的this 指向Window
函数中的this——>谁调用就指向谁
- 对象.函数（）——>对象
- 一般函数——>Window
箭头函数没有this——>指向的是：上一级作用域的this
事件中的this——>指向的是：事件源（监听的那个dom对象就指向哪个）
构造函数中的this——>指向的是：实例对象
定时器/延时器中的this——>Window

手写数组方法

indexof：用于查找特定元素在数组中的第一个索引位置。如果找到了该元素，则返回其索引；如果没有找到，则返回 -1。这个方法可以接受两个参数：要查找的元素和一个可选的起始索引，表示从哪个位置开始查找。

  Array.prototype.indexof = null;
  Array.prototype.lastindexof = null;
  Array.prototype.MyIndexOf = function(item){
    //定义一个索引  -1
    let index = -1;
    //循环数组 查找数组中元素 ==item  构造函数中的this指向的是实例对象  即arr
    for(let i = 0;i<this.length;i++){
       //找到更改索引值 并结束 返回    没有返回索引-1
      if(this[i] === item){
        index = i;
        break;
      }
    }
    return index;
  }
  let arr = [1,5,2,2,6,8]
  console.log(arr.MyIndexOf(2))
  console.log(arr.MyLastIndexOf(2))//这个就不要break  一直找到最后一个或者倒着循环

forEach：forEach 方法不会改变原数组，它会对数组的每个元素按顺序调用一个回调函数，这个回调函数可以接受三个参数：当前元素的值、当前元素的索引以及调用 forEach 的数组本身。forEach 方法常用于遍历数组并对每个元素执行特定的操作，比如打印每个元素、修改元素的值等。虽然 forEach 不会返回新的数组，但它可以用于对数组进行操作或执行副作用。

  /*接收的只有一个参数 就是
  function(item,index,arr){
    let b = 100;
    console.log(item+b)
  })
  这段函数体，用callback去接*/
  Array.prototype.myForEach = function(callback){
    //执行callback
    for(let i = 0;i<this.length;i++){
      //每循环一次执行一次callback，callback是那段函数体，所以要有参数
      callback(this[i],i,this)
    }
    
  }
  let arr = [1,8,6,3,4,2]
  //先写一次foreach  在写myForEach
  arr.myForEach(function(item,index,arr){
    let b = 100;
    console.log(item+b)
  })

map:用于遍历数组并对每个元素执行一个提供的函数。map 方法会对数组中的每个元素调用一次提供的函数，并返回一个由每次函数调用的结果组成的新的数组。原数组不会被修改。

   // map 返回新数组 原数组不会修改 
      Array.prototype.myMap = function(callback){
        //map要返回一个新数组  所以先定一个空数组
          let arr = [];
          //业务逻辑--循环一次 执行一次callback()，这里callback会返回一个东西 所以要去接 即let x =  callback()
        //callback每次循环返回的东西其实就是一个元素  return出来后放到arr里面去
          for(let i=0;i<this.length;i++){
              arr[i]=callback(this[i],i,this) 
          }
          return arr;
      }
  
      let arr = [1015,4,54,545,4,54,5]
      let arr1 = arr.myMap(function(item,index,arr){
          return item+100;
      })
      console.log(arr1);
      // arr1   [1115,104,154,645,104,154,105]
      let arr2 = [{name:'xxx',age:40},{name:'yyy',age:5}]
      let arr3 = arr2.myMap(item=>{item.age+=50;return item})
      console.log(arr3);

this借用

立即执行--调用
- 要借的对象.要借的函数.call(借给谁,参数1,参数2...)
- 要借的对象.要借的函数.apply(借给谁,[参数1,参数2])
永久借用--新的函数
- let fn = 要借的对象.要借的函数.bind(借给谁,参数1,参数2)

  <script>
      let students1 = {
        name: 'xxx',
        study: function (address, book) {
          return this.name + '在' + address + '学习:' + book;
        }
      }
  
      let students2 = {
        name: '嘻嘻嘻'
      }
      //     立即执行--调用
      // - 要借的对象.要借的函数.call(借给谁,参数1,参数2...)
      console.log(students1.study.call(students2, '家里', '数学'));
      // - 要借的对象.要借的函数.apply(借给谁,[参数1,参数2])
      console.log(students1.study.apply(students2, ['家里', '语文']));
  
      //     永久借用--新的函数
      // - let fn = 要借的对象.要借的函数.bind(借给谁,参数1,参数2)
  
      let fn = students1.study.bind(students2, '图书馆', '英语')
      console.log(fn());