JavaScript高级总结,看这篇准没错

最新推荐文章于 2022-08-19 09:50:34 发布
最新推荐文章于 2022-08-19 09:50:34 发布
阅读量177 收藏 1
点赞数
文章标签： js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43693458/article/details/105143108
版权

Javascript高级笔记

1. new创建对象的本质

   function Person(name,age){
     this.name = name;
     this.age = age;
     this.sayHi = function(){
       return "Hello,I'm" + this.name;
     }
   }
   let John = new Person(name,age);
   /**
    * new的过程经过了这几步
    * 1. let obj = {};新建一个对象，开辟空间
    * 2. obj.__proto__ = Person.prototype;将对象的__proto__指向构造函数的prototype
    * 3. Person.call(obj); 执行构造函数中的代码，注意。此时的this为obj
    * 4. 最后返回obj
    * 
   */

2. 几种常见的对象创建方式

1. 字面量创建方式

  let person = {
    name: "孙悟空",
    age: 100,
    sex: 1,
    power: 10000,
    skill: [{
        name: "龟派气功",
        hurt: 10000,
      },
      {
        name: "十倍界王拳",
        hurt: 5000,
      }, {
        name: "元气弹",
        hurt: 999999,
      }
    ]
  };

  person.skill.map(item => {
    console.log(item.name + "," +         item.hurt);
  });

2. 系统构造函数

  let obj = new Object();
  obj.name = "John";
  obj.age = 18;
  obj.sayhi = function(){
    console.log("Hello,I'm John");
  }

以上两种方式每次只能创建一个实例对象，当要创建多个相似对象时，存在代码冗余问题

3. 工厂函数创建对象

  //可以传参数，提高代码复用，
  function createStudent(name,age){
      let student = new Object();
      student.name = name;
      student.age = age;
      student.sayhi = function(){
        console.log("Hello,I'm "+student.name);
     }
      return student;
 }
 	//但是无法判读属于哪个对象。（instanceof）

4. 自定义构造函数

  /**
   * 自定义构造函数可以用instanceof判断属于哪个对象,且解决了代码复用问题，但是每个公共方法都会创建一个实例对象，造成内存浪费。
   */
  function Student(name,age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
      console.log("Hello,I'm " + this.name);
    }
  }

5. 混合模式（构造函数模式+原型模式）

  /**
  * 原型的作用，共享数据，节省内存，不同实例对象的sayHi方法都指向同一个
  */
  function Student(name,age){
    this.name = name;
    this.age = age;
  }
  Student.prototype = {
    //将自身的prototype指向构造函数
    constructor : Student,
    sayHi:function(){
      console.log("Hello,I'm" + this.name);
    }
  }

3. 原型链

1. 构造函数的原型对象prototype

每个函数function Person()为例，都有一个原型对象prototype，该原型对象默认存在两个属性，一个是constructor指向他的构造函数，即Person()，还有一个__ proto __，指向的是实例化Person的够构造函数的prototype，即Function.prototype，因为function Person() 相当于 let Person = new Function()。

    function Person(age) {
      this.age = age;
    }
    let per = new Person(18);
    console.dir(Person);
    console.log(per.__proto__ === Person.prototype);//true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yp59aLXu-1585295137728)(/Users/mac/Desktop/web/js高级/assets/image/prototype.png)]

2. 实例对象的原型对象__ proto __

首先需要清除new的过程，因为实例化过程就是new Person()，需要清楚new这个过程发生的事情

     * new的过程经过了这几步
     * 1. let obj = {};新建一个对象，开辟空间
     * 2. obj.__proto__ = Person.prototype;将对象的__proto__指向构造函数的prototype
     * 3. Person.call(obj); 执行构造函数中的代码，注意。此时的this为obj
     * 4. 最后返回obj

在new的过程中，obj.__ proto__ 指向构造函数的prototype，所以每个实例对象都存在一个__ __ proto __属性，而这个属性就是指向构造函数的prototype对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmMdC8F0-1585295137730)(/Users/mac/Desktop/web/js高级/assets/image/原型链.png)]

3.原型链的构成

小总结：

1.每个函数都存在prototype和__ proto __ 。每个实例对象都存在__ proto __ 。

2.原型链就是实例对象的__ proto __ 指向构造函数的prototype ,构造函数的prtotype.__ proto **指向Object.prototype,最后的Object.prototype. proto __指向null**，而只要是在这条链上的属性或方法，

实例对象都能访问

在js中，只要是在原型链(prototype)上的属性，在哪个环节都可以任意的调用,例子↓

	//构造函数
	function Person(name){
    this.name = name;
  }
	//在构造函数原型对象上添加方法
	Person.prototype.run = function(){
    console.log("跑步");
  }
	
	//在Function上定义一个方法
	Object.prototype.printfName = function(){
    console.log(this.name);
  }

	//实例化对象
	let per = new Person("GZH");
	
	//此时per可以调用run()方法
	per.run();//跑步
	
	//也可以调用printfName方法,因为prototype是new Object()，也就是prototype是Object的实例对象，所以prototype中的__proto__指向Object的prototype,所以printfName也在per的原型链上,可以访问
	per.printfName();//GZH

4. 原型对象的指向是可以被改变的

因为prototype也是一个对象，所以他也可以指向任何对象，这也是继承的重要基础。

    function Person(name) {
      this.name = name;
    }
		Person.prototype.run = function(){
      console.log("跑步");
    }
		function Student() {
			
   	}
		Student.prototype.study = function(){
      console.log("学习");
    }

		let stu1 = new Student();
		//可以访问study，因为study在原型链上
		stu1.study();//学习

		//改变Student的指向，此时Student.prototype = {age,__proto__(指向Person的prototype)}
		Student.prorotype = new Person();

		let stu2 = new Student();
		stu2.run();//可以访问，因为run()方法在原型链上
		stu2.study();//报错，因为原型链上已经发生改变

4. 继承

1. 原型链继承

    //父类 人类 --- 姓名，年龄，性别， -行为- 吃，玩
    //子类 学生 --- 姓名，年龄，性别， -行为- 吃，玩，学习
    function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex || 1;
    }
    Person.prototype.eat = function () {
      console.log(this.name + "吃东西");
    }
    Person.prototype.play = function () {
      console.log(this.name + "玩")
    }

    function Student(sorce) {
      this.sorce = sorce;
    }
    Student.prototype = new Person("小明", 18, 1);
    Student.prototype.study = function () {
      console.log(this.name + "在学习");
    }
    let stu = new Student("100");
    console.dir(stu);
    stu.study();

优点：优点是继承了父类的模板，又继承了父类的原型对象

缺点：对象属性固定，修改起来麻烦；例如连续创建几个学生实例对象，名字都是相同，要改则需要用stu.name = “…”，这样修改。

2. 借用构造函数修改


function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
Person.prototype.eat = function () {
  console.log("吃饭饭");
};

function Student(name, age, sex, score) {
  Person.call(this, name, age, sex);//利用call的方法执行Person构造函数，初始化属性
  this.score = score;
}

let stu = new Student("小明", 18, "男", 100);
stu.eat();

优点：比原型链继承更加灵活，实例对象时即可初始化自身属性

缺点：无法访问父类的prototype方法

3.组合继承

// 借用组合继承（原型继承+借用构造函数继承）
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
Person.prototype.eat = function () {
  console.log("吃饭饭");
};

function Student(name, age, sex, score) {
  Person.call(this, name, age, sex);
  this.score = score;
}
Student.prototype = new Person();//改变原型指向
Student.prototype.constructor = Student;//将构造函数指向本身

let stu = new Student("小明", 18, "男", 100);
stu.eat();

优点：结合原型链继承和借用构造函数继承，就完美地解决了之前这二者各自表现出来的缺点。即可继承属性，又可继承方法

缺点：Person()方法执行了两次，一次 Person.call(this, name, age, sex);一次new Person();

4.拷贝继承

//1.赋值，无开辟新空间
let obj = {
  name:"Gzh",
  age:18
}
let obj1 = obj;


//2.开辟了新空间
function Person() {

}
Person.prototype.name = "阿萨德";
Person.prototype.age = 18;
Person.prototype.sex = "男";
Person.prototype.sayHi = function () {
  console.log("hello");
};
let student = {};
for (let key in Person.prototype) {
  student[key] = Person.prototype[key];
}

优点：支持多继承

缺点：1、效率较低，内存占用高（因为要拷贝父类的属性）

​ 2、无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

5. 寄生组合继承

    function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    Person.prototype.eat = function () {
      console.log(this.name + "在吃饭");
    }

    function Student(name, age, sex, grade) {
      Person.call(this, name, age, sex);
      this.grade = grade;
    }
    (function () {
      function Super() {};
      Super.prototype = Person.prototype;
      console.log(Super);
      Student.prototype = new Super();
    })();
    let stu = new Student("wassupbro", 18, "男", "大二");
    stu.eat();//wassupbro在吃饭
    console.dir(stu);

优点：既可以继承属性，又可以继承方法，也只执行了一次Person的构造函数，堪称完美

缺点：实现起来稍复杂

5.call、apply、bind方法

1. js中this指向问题

1. 在全局环境中

在全局执行环境中（在任何函数体外部），this都是指向全局对象。在浏览器中，window对象即是全局对象;

console.log(this); //Window
var a = 1;
console.log(window.a);  //1
2.在函数环境中

在函数内容，this指向取决于函数调用的方式;

function f(){
"use strict"; //使用严格模式
console.log(this); } f(); // window ；使用严格模式时，输出undefined
3. 作为对象的方法调用时

当函数作为对象的方法被调用时，this指向调用的该函数的对象;

var obj = {
  a: 37,
  fn: function() {
    return this.a;
  }
};
console.log(obj.fn());  // 37
4.作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

虽然构造器返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）。

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); //  37
function C2(){
  this.a = 37;
  return {a:38};
}
o = new C2();
console.log(o.a); //  38，手动设置了返回对象
5.作为DOM事件处理函数

当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

2. call和apply方法

  • 作用：用来改变函数中this的指向
  • 用法：Person.call(对象，参数1，参数2,…);Person.apply(对象，[参数1，参数2,…])
  • 使用：需要调用其他对象的方法，并且this指向自身时；
  • 实例,下面的例子↓
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.eat = function () {
  console.log(this.name + "在吃饭");
};
let obj = {
  name: "gzh",
  age: 18
};
let per = new Person("htat", 18);
per.eat(); //htat在吃饭

per.eat.call(obj); //gzh在吃饭，改变了this的指向

3.bind方法

  • 作用：改变this指向，复制一份到变量

  • 实例

    let obj = {
  name: "gzh",
  age: 18,
  eat: function () {
    console.log(this.name);
  }
};
let obj2 = {
  name: "http"
};
obj2.eat = obj.eat.bind(obj2); //改变了this的指向并将eat方法复制给obj2.eat
obj2.eat();//http

6.闭包

  • 概念：函数A内的数据可以被函数B访问

  • 模式：函数闭包，对象模式的闭包

  • 作用：缓存数据，延长作用域；私有化变量

  • 缺点：可能会造成数据泄露

//例子：
//函数模式闭包
function f3() {
  let num = 10;
  return function () {
    return ++num;
  };
}
let f4 = f3();
console.log(f4());//11 num没有被系统回收
console.log(f4());//12
console.log(f4());//13
//对象模式闭包
function f2() {
  let num = 20;
  let obj = {
    age: num,
  };
  return obj;
}
console.log(f2().age);//函数外可以访问到f2中的变量，

利用闭包实现一个点赞的案例

	<input type="button" value="点赞(1)">
  <input type="button" value="点赞(1)">
  <input type="button" value="点赞(1)">
  <input type="button" value="点赞(1)">
  <script>
    let btnArr = document.getElementsByTagName("input");
    for (let i = 0; i < btnArr.length; i++) {
      let value = 1;
      btnArr[i].onclick = function () {
        this.value = "点赞(" + (++value) + ")";//注册点击事件，可以访问到value
      }
    }
  </script>

7. 沙箱

概念：沙箱 就是形成一个密闭的环境 不能 主动的影响外界，在js中就是自执行函数

作用：新建一块可用于模块运行的环境(沙箱)，自己的代码放在回调函数里，且不会对其他的个人沙箱造成影响

let num = 1000;
((function(){
  //在自执行函数中有自己的作用域
  let num = 10;
  console.log(num);//10
})())
console.log(num);//1000

8. 浅拷贝和深拷贝

js中有基本类型(Number,String,Null,Undefined,Boolean,Symbol)和引用类型(Object,Array,Function)，基本类型的赋值会复制值，而引用类型的赋值则会复制他的引用地址。

1.浅拷贝

概念：将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

实现方法：

  1. 遍历复制

    let obj2 = {
  name: "gzh",
  age: 18,
  hobby: ["study", "basketball", "football"],
  firend: [{
    name: "asd",
    age: 18
  }]
};
let obj3 = {};
for (let key in obj2) {
	 obj3[key] = obj2[key];
}
obj3.name = "hha";
obj3.hobby[0] = "run";
console.log(obj2.name);//gzh
console.log(obj2.hobby[0]);//run,只做第一层拷贝，obj3.hobby跟obj2.hobby指向同一个引用

  2. ES6的Object.assign()

    let obj4 = Object.assign();
obj4.name = "hha";
obj4.hobby[0] = "run";
console.log(obj2.name);//gzh
console.log(obj2.hobby[0]);//run,只做第一层拷贝，obj3.hobby跟obj2.hobby指向同一个引用

  3. ES6的扩展运算符

    let obj5 = {...obj2};
obj5.name = "hha";
obj5.hobby[0] = "run";
console.log(obj2.name);//gzh
console.log(obj2.hobby[0]);//run,只做第一层拷贝，obj3.hobby跟obj2.hobby指向同一个引用
2.深拷贝

概念：深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝

实现方法：

  1. JSON.parse()和JSON.stringify()

    let obj6 = JSON.parse(JSON.stringify(obj2));
obj6.name = "hha";
obj6.hobby[0] = "run";
console.log(obj2.name);//gzh
console.log(obj2.hobby[0]);//study 深拷贝，两个对象互不影响

    缺点：当值为undefined、function、symbol 会在转换过程中被忽略。。。

  2. 自己封装函数

    function extend(a, b) {
  for (let key in a) {
    let item = a[key];
    if (item instanceof Array) {
      b[key] = [];
      extend(item, b[key]);
    } else if (item instanceof Object) {
      b[key] = {};
      extend(item, b[key]);
    } else {
      b[key] = item;
    }
  }
}
let obj7 = extend(obj2,obj7);
obj7.name = "hha";
obj7.hobby[0] = "run";
console.log(obj2.name);//gzh
console.log(obj2.hobby[0]);//study 深拷贝，两个对象互不影响

  3. immutable.js库

下次继续更新，个人博客zehongguo.github.io

代码打太久会头疼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 高级（进阶）
m0_73198722的博客
10-29 745
JS高级
关于this.name=name的理解
热门推荐
Youngkiko的博客
07-12 2万+
比如： public Employee(name, age) { this.name = name; this.age = age;   }     前一个name为Employee或者说类的属性，而后一个name则指的是一个函数的一个参数（变量，比如张三李四），而后面这个函数的参数就是用于给前一个类的属性赋值的，或者说后面的name就是当前对象的name要修改的值 比如：   ...
this.name=name;和this.setName(name);的区别
weixin_33857679的博客
03-02 874
其实一般属性设置为private后，才会写属性的set和get方法 在本类中可以用 this.name=name 但是,在其他类中药给name赋值,就只能用set了
JavaScript高级知识汇总（高级篇）
ZS74520的博客
09-10 1万+
JavaScript知识总结（高级篇） 1.深入基础 1.1数据类型 1.分类： -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空 -引用（对象）类型 -Object:任意对象 -Function：一种特别的对象（可以执行） -Array：一种特别的对象（数值下标，内部数据是有序的） 2.判断： -typeof： 可以判断：undefined、数值、字符串、布尔值 不能判断: null与object
JavaScript 高级篇之函数 （四）
10-28
本节我将分享我对函数，嵌套函数，作为数据的函数，作为对象的函数等
JavaScript高级篇视频教程
06-28
"JavaScript高级篇视频教程"旨在帮助已经掌握了JavaScript基础知识的学习者进一步提升技能，深入理解其高级特性，包括面向对象编程、异步处理、模块化、性能优化等多个方面。 在JavaScript的高级篇中，首先会讲解...
javaScript知识点总结(必看篇)
11-22
1、javaScript的概念:是一种表述语言，也是一种基于对象(Object)和事件驱动(EventDriven)的，安全性好的脚本语言，运行在客户端，从而减轻服务器端的负担，总结如下：  1.javaScript主要用来向HTML页面找那个添加...
JavaScript(高级篇)视频教程.rar
03-05
前软件高级工程师，具备丰富的软件开发、项目管理、软件人才培训和人才服务经验。公司自成立以来一直遵循“以市场为导向、以客户为中心，协同进步、合作共赢”的理念，致力于为国内外企业、高校提供优质的软件和人才...
JS之事件高级
释怀°Believe的博客
02-27 335
事件高级
JS的DOM注册事件和删除事件
码云仓库地址：https://gitee.com/lance-gyq
01-15 559
1.注册事件（绑定事件） 1.1注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方式 利用on开头的事件onclick btn.onclick = function() {} 特点:注册事件的唯一性 同一个元素同一个事件只能设置-个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 w3c标准推荐方式 addEventListener()它是一一个方法 IE9之前的IE不支持此方法,可使用attachEven
JavaScript高级（详细总结）
最新发布
程序员阿龙的博客
08-19 1577
JavaScript高级（详细总结）
Javascript高级技术篇(2): 深入理解面向对象
weixin_33691700的博客
06-27 2357
我们常说Javascript是一种面向对象的语言，那也就是说具有面向对象的一些基本特性。比如包含对象、类、属性、方法以及构造函数等基本元素，很多人在想：JS类到底是什么玩意？其实很简单，就是一个function，正所谓"简单就是美"嘛。在自定义类的同时，我们也回顾一下JS基本的类：Math，Array，Object以及String等。 //定义JS类的两种方式(注意这里是大写开头) fun...
JavaScript高级篇
AER的故事的博客
03-13 84
JS 高级总结
weixin_34128237的博客
07-12 1879
一、查找HTML元素 　　通常，通过 JavaScript，您需要操作 HTML 元素。 　　1、通过 id 找到 HTML 元素 　　2、通过标签名找到 HTML 元素 　　3、通过类名找到 HTML 元素 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 var x=document.getElementById("intro"); var y=d...
技术分享｜Javascript高级教程学习指南
pengxian00007的博客
05-26 832
技术分享｜Javascript高级教程学习指南引言高级功能命名空间Javascript原型错误处理Javascript模块链接js方法生成器《2021年Web前端开发项目集合包》 上个月月初我们分享了一篇JavaScript的前世今生，了解了JS的基础内容。 本篇文章，我们将进入JavaScript高级课程的学习，为大家分享JavaScript高级教程所涵盖的知识要点。 引言 一、JavaScript概述 “JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。“ 它是一种编程语言
JavaScript高级知识点整理
FreeSpider
05-22 3169
JavaScript高级知识点整理一、JS中的数组1.数组的三种定义方式（1）、实例化对象var aArray=new Array(1,2,3,4,5);（2）、快捷创建var aTwoArray = [1,2,3,"d","f"];（3）、多维数组var aThreeArray = [[1,2,3],["a","b","c"]];在这里，只有满足了数组中的元素是数组的时候才是多维数组2.数组的操...
js高级进阶之高阶函数篇
weixin_40073115的博客
01-05 1579
学会高阶函数是每一个前端开发者走向高级阶段的必经之路，虽然你可以在业务代码中不去使用，但你总需要去读懂别人的代码吧，如果你不熟悉这些高阶使用方法，必然会遭到鄙视嘲笑，甚至强行复制粘切不明大意的胡乱修改会带来灾难性的后果，当然学习高阶函数也不仅仅是要去使用几个高阶函数方法，最主要的是领略其设计思想，为自己之后写出牛逼点的代码做基础。 高阶函数概念 一等函数 您可能听说过JavaScript将函数视为...
JavaScript 高级教程
04-03
JavaScript 高级教程 JavaScript 是因特网上最流行的脚本语言，存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。本教程是 w3school JavaScript 教程的高级版本，从 JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值