JS要点汇总（一）

最新推荐文章于 2024-10-17 09:40:47 发布

张正宜

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量258

点赞数

分类专栏：技术分析 js 文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/zhangsx101/article/details/121966807

版权

技术分析同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

构造函数、原型、原型链、this、apply()、call()、防抖与节流

一、JS中的prototype、proto与constructor

1.1、前言

1.1.1、构造函数

function Person(name) {
	this.name = name;
};
let p1 = new Person('zyzhang');

如上代码，用 new 关键字来调用的函数，称为构造函数(Person()),此时会得到一个实例化对象person。
当用new关键字调用时，会产生一个新的内存空间（标记为Person得实例），此时函数内部得this指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zyzhang’。

注意事项：

如果手动在构造函数中返回一个基本类型,最终还是会返回this，（如果是一个普通函数就会返回50）如下：

function Person2() {
 this.age= 28;
 return 50;
}

var p2 = new Person2();
console.log(p2.age);   // 28

如果手动添加一个复杂数据类型(对象)的返回值，最终返回该对象，如下：

function Person3() {
 this.height = '180';
 return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3

1.2、proto介绍

__proto__和constructor属性是对象所独有的；
prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性。

__proto__属性都是由一个对象指向一个对象（指向它们的原型对象，也可以理解为父对象），如上面代码中得对象p，p的__proto__指向Person.prototype，Person.prototype指向Object.prototype，Object.prototype指向null(即到达顶端)，这样的一条链即为我们所谓的原型链

1.3、prototype介绍

prototype属性是函数独有的，从一个函数指向一个对象，它的含义是函数的原型对象，也就是这个函数所创建的实例的原型对象。即p.proto === Person.prototype，它们两个完全一样。
它的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。
任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

1.4、constructor介绍

constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数

1.5、理解

1.5.1 函数的prototype指向了一个对象，这个对象就是正在调用该构造函数而创建的实例的原型(person1的原型)

function Person(){}   
var person1 = new Person()  
person1.name = "zyzhang" 
// true
console.log(Person.prototype === person1.__proto__)

1.5.2 每个原型都有一个constructor属性指向关联的构造函数。

function Person(){}   
var person1 = new Person()  
person1.name = "zyzhang" 
// true
console.log(Person === Person.prototype.constructor);

1.5.3 当读取实例的属性时，如果找不到，就会查找对象的原型中的属性，如果还查不到就去原型的原型继续查找，一直找到最顶层为止

function Person() { }
Person.prototype.name = 'ZS';
var person = new Person();
person.name = 'LS';
console.log(person.name) // LS 
delete person.name;
console.log(person.name) // ZS

1.5.4 对于一个已经实例化的函数（构造函数）是不能添加属性或方法的，这个时候prototype（原型对象）就能发挥作用了。

也就是说Person.sex = '男’是行不通的，要添加一个新的属性需要在在构造器函数中添加，如下代码就可以给对象的构造函数添加新的属性：Person.prototype.sex = ‘男’

二、JS当中的this

定义：当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。
接下来我们来看看不同情况下this的指向。重点：this的指向是调用时决定的。

在全局上下文中，函数调用中直接使用this,this指向window
通过对象调用，this指向调用方法的对象
箭头函数——this与所在上下文this指向相同
构造函数——this指向构造出的对象

const obj = {
  a:1,
  test:function(){
      console.log(this) // this为obj对象
  }
}
obj.test() // 通过对象调用

function Test(){
    this.name = 'test'; // this指向Test对象
}
let t = new Test();
console.log(t.name) // test

三、JS当中的call()、apply()

1、改变this指向

var obj = {
  myFun: function(...agreement){
    // 这里的this指向db对象
    console.log(this.name + ":" + this.age); 
 }
}

var db = {
  name: "德玛",
  age: 99
}

obj.myFun.call(db,'a','b','c');
obj.myFun.apply(db,[1,2,3]);

var Person = {name :'Lucy'}
function getName(name1,name2){
   // 这里的this指向Person对象
   console.log(this.name + name1 + name2);    //Lucy Tom Tim
}
getName.apply(Person,['Tom','Tim']);  
// 第一个参数指向person对象 ，this.name 指向 Person.name ; 
// 第二个参数是一个数组，数组中的元素分别代表函数的参数一和参数二

2、借用别的对象的方法（用一个对象替换掉另一个对象(this)）

var Person1 = function(){
  this.name = 'LiLi';
}

var Person2 = function(){
 // 作用：使用 Person1 对象代替 this 对象，此时Person2 就有了 Person1 中的所有属性和方法了
  Person1.call(this);  
} 

var person = new Person2();
console.log(person.name) // LiLi

四、JS当中的防抖与节流

防抖（debounce）：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

函数防抖（debounce）

search搜索联想，用户在不断输入值时，用防抖来节约请求资源；
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

函数节流（throttle）

鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

说明：为了方便没用写两个例子，主要理解含义即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖与节流</title>
    <style>
      .input {width: 300px;height: 45px;border: 1px solid #ddd;
        border-radius: 5px;text-indent: 6px;font-size: 18px;}
    </style>
  </head>
  <body>
    <input class="input" oninput="change(event)" onporpertychange="change(event)" />

    <input class="input" oninput="change2(event)" onporpertychange="change2(event)" />
  </body>

  <script>
    change = debounce((e)=>{
      console.log("防抖======",e.target.value)
    },500, true) // true: 立即执行  false: 延迟

    change2 = throttle((e)=>{
      console.log("节流======",e.target.value)
    },500, 1) // 1: 时间戳 2： 定时

    // 防抖
    function debounce(func,delay,immediate) {
      let timer, context, args;
      return function() {
        context = this;
        args = arguments;
        if (timer) clearTimeout(timer);
        if(immediate) {
          let callNow = !timer;
          timer = setTimeout(()=>{
            timer = null;
          })
          if(callNow) func.apply(context,args)
        } else {
          timer = setTimeout(()=>{
            func.apply(context,args)
          },delay)
        }
      }
    }

    // 节流
    function throttle(func,delay,type) {
      let timer, context, args, previous = 0;
      return function() {
        context = this;
        args = arguments;
        if(type == 1) { // 时间戳
          let now = Date.now();
          if (now - previous > delay) { 
            func.apply(context,args);
            previous = now;
          }
        } else { // 定时
          if(!timer) {
            timer = setTimeout(()=>{
              timer = null;
              func.apply(context,args)
            },delay);
          }
        }
      }
    }
  </script>
</html>