『前端学习笔记』 JavaScript 类与对象

最新推荐文章于 2020-08-08 01:51:22 发布
最新推荐文章于 2020-08-08 01:51:22 发布
阅读量972 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLZX_HM/article/details/107562799
版权

参考视频：2019全新javaScript进阶面向对象ES6

参考文档：ES6入门教程


文章目录




面向对象特征

  • （抽象）
  • 封装
  • 继承
  • 多态



ES6类


类class

  • 创建类：
  class Person{
    //body
  }
  • 创建对象/实例：
  var x = new Person();

必须使用new。

ES6中的类没有变量提升：先定义类，才能实例化。不可颠倒。

  • 添加函数/方法：
  //in class
  myFunction(str){ //4种JS输出
    console.log(str);
    alert(str);
    document.write(str);
    //document.getElementById("myid").innerHTML = str;
    return 0;
  }

不加function！
不加,！



调用自己：this对象

类对象的共有属性和方法通过this调用。

  • 注意this的指向：
<button>按钮</button>

<script>

  class Person{
    constructor(name) {
      this.btn = document.querySelector("button");
      this.btn.onclick = this.f;
      //加小括号：加载页面后就调用
      //不加小括号：点击按钮触发事件才会调用
    }
    f(){
      console.log(this); //使用this
    }
  }

  var x = new Person();

</script>
  • 代码结果
    在这里插入图片描述

此处this指向当前对象中的按钮，而不是当前对象。

  • 构造器中this指向当前实例对象。
  • 方法中this指向当前调用者对象。



构造器constructor

在使用new实例化时，调用构造器，进行赋值等初始化操作。

不加构造器时，系统会默认添加一个空构造器。

构造器唯一（和Java不同）。

  • 创建：
  class Person{
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }
  • 通过构造器实例化：
  var x = new Person("myname", 20);
  • 可使用：
  console.log(x.age);
  console.log(x);
  • 代码结果：
    在这里插入图片描述



继承extends

  class Father{
  }
  class Son extends Father{
  }

子类对象可以使用父类已有的属性和方法。

写和父类同名的方法：重写。
写和父类不同名方法：扩展。


调用父类：super对象

  • 调用父类构造器：
 class Father{
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }
  class Son extends Father{
    constructor(name, age) {
      super(name, age); //调用父类（构造器）
      //super必须放在this前面
      this.name = name;
      this.age = age;
    }
  }
  • 调用父类普通函数：
  class Father{
    say(){
      return "in Father";
    }
  }
  class Son extends Father{
    say(){ //重写
      console.log(super.say()); //调用父类方法
    }
  }



Javascript对象

ES6之前Javascript没有类，但是有对象的概念，而且所有事物都是对象。

定义对象

  • 定义对象（使用变量）：
  /*对象*/
  var Person={
    /*属性*/
    name:"abc",
    age:30,
    /*方法*/
    echo:function(str){
      alert(str);
    }
  }
  • 定义对象（使用函数作为构造器）：
  /*contructor*/
  function Person(nameText, ageText) {
    this.name = nameText;
    this.age = ageText;
    this.f = function(){
      console.log("in function f");
    }
  }
  
  var p = new Person("abc", 30);
  
  document.write(p.name);
  document.write(p.age);
  p.f();



实例成员和静态成员

  function Person(nameText) {
    this.name = nameText; //实例成员
  }

  Person.age = 30; //静态成员

  console.log(new Person("myname").name);
  console.log(Person.age);



prototype原型对象与__proto__原型属性

每一个构造函数都有一个prototype属性(对象)，即原型对象。

不变的方法可以直接定义在prototype上，让对象实例共享方法。节约内存空间。

  • prototype原型对象（属于构造函数）：
  function Person(nameText) {
    this.name = nameText;
  }
  
  Person.prototype.f = function(str){ //原型
    console.log(str);
  }

  var t = new Person("myname");
  t.f(t.name); //调用测试
  1. 代码结果
    在这里插入图片描述
  • __proto__原型属性（属于对象实例）：
  function Person(nameText) {
    this.name = nameText;
  }
  
  Person.prototype.f = function(str){ //原型
    console.log(str);
  }

  var t = new Person("myname");
  console.log(t); //打印t对象
  console.log(t.__proto__ === Person.prototype); //t中__proto__与构造函数的prototype是否严格相等
  1. 代码结果（对象属性）：
    在这里插入图片描述
  2. 代码结果（严格相等）：
    在这里插入图片描述
    足以证明实例对象的原型属性和构造函数的原型对象是相同的。


constructor构造函数

__proto__和prototype都含有一个constructor属性，指回构造函数本身。

  • 构造函数属性：
  function Person(nameText) {
    this.name = nameText;
  }
  
  Person.prototype.f = function(str){ //原型
    console.log(str);
  }

  var t = new Person("myname");
  console.log(t.__proto__);
  console.log(Person.prototype);
  1. 代码结果：
    在这里插入图片描述
  • 构造函数属性测试：
  function Person(nameText) {
    this.name = nameText;
  }

  Person.prototype.f = function(str){ //原型
    console.log(str);
  }

  var t = new Person("myname");
  console.log(t.__proto__.constructor);
  console.log(Person.prototype.constructor);
  1. 代码结果
    在这里插入图片描述
  • 使用constructor指回构造函数1：
  function Person(nameText) {
    this.name = nameText;
  }

  Person.prototype = { //原型，一次性添加多个函数
    f1: function (str) {
      console.log(str);
    },
    f2: function (str) {
      alert(str);
    }
    //相对于单次添加函数Person.prototype.f(){}，会覆盖掉constructor！
  }

  console.log(Person.prototype.constructor); //批量添加原型后，构造函数

  Person.prototype.constructor = Person; //手动指回
  console.log(Person.prototype.constructor); //批量添加原型并手动指回后，构造函数
  1. 代码结果
    在这里插入图片描述
  • 使用constructor指回构造函数2：
  function Person(nameText) {
    this.name = nameText;
  }

  Person.prototype = { //原型，一次性添加多个函数
    constructor: Person, //手动指回
    f1: function (str) {
      console.log(str);
    },
    f2: function (str) {
      alert(str);
    }
    //相对于单次添加函数Person.prototype.f(){}，会覆盖掉constructor！
  }

  console.log(Person.prototype.constructor);
  1. 代码结果：
    在这里插入图片描述

原型链

  • （constructor、prototype、实例对象）三者关系
    在这里插入图片描述
  • 原型链
    -在这里插入图片描述
  1. 函数原型对象prototype也有__proto__属性，和Object对象的prototype严格相等。
  function Person(nameText) {
    this.name = nameText;
  }

  console.log(Person.prototype.__proto__ === Object.prototype);

  1. 代码结果：true

  2. Object对象的prototype中的__proto__属性指向null。

  console.log(Object.prototype.__proto__);
  1. 代码结果：null


基于原型链的成员查找机制

在这里插入图片描述


this指向问题

  • 一般情况下，this指向调用者。
  • 构造函数中，this指向实例对象
  function Person(nameText) {
    this.name = nameText; //this指向对象实例
  }
  • 函数原型中，this指向实例对象
  function Person(nameText) {
    this.name = nameText; 
  }

  Person.prototype.f = function(){
    console.log(this); //this指向对象实例
  }

  var t = new Person("myname");
  t.f(); //调用
  1. 代码结果：
    在这里插入图片描述


使用原型对象扩展内置对象

  • 打印Array原型对象：
  console.log(Array.prototype);
  1. 代码结果：
    在这里插入图片描述
    在这里插入图片描述
  • 为Array类添加新函数（求和）：
  Array.prototype.sum = function () {
    var res = 0;
    var len = this.length;
    for(let i = 0; i < len; i++){
      res += this[i];
    }
    return res;
  }

  t = [1, 2, 3];
  console.log(t.sum());



继承

ES6之前通过构造函数和原型函数实现组合继承。

call方法

调用指定函数。
修改函数运行时this指向。

  • 调用函数：
  function f() {
    console.log("my function");
  }

  f.call(); //显式调用函数
  • 改变指向：
  1. this指向默认window
  function f() {
    console.log(this); //调用者：window
  }

  f.call();
  1. 代码结果
    在这里插入图片描述
  2. 使this指向新对象：
  function f() {
    console.log(this); //调用者：window
  }

  var newobject = {age: 20};

  f.call(newobject); //更改调用者
  1. 代码结果
    在这里插入图片描述
  2. 使this指向新对象（增加新参数）：
  function f(x, y) {
    console.log(this); //调用者：window
  }

  var newobject = {age: 20};

  f.call(newobject, 1, 2); //第一个参数更改调用者，后续为普通参数



继承父类属性：构造函数

通过call()将父类型的this指向子类型的this。

  function Father(name) { //父类
    this.name = name;
  }

  function Son(name) { //子类
	Father.call(this, name); //父类的this变成了子类的this，再添加参数
	this.age = age; //新加属性
  }

  var t = new Son("myname");
  console.log(t.name); //验证


继承父类属性：原型对象

  • 指向父类原型：
  function Father(name) { //父类
    this.name = name;
  }
  Father.prototype.getName = function(){ //父类原型
	return this.name;
  }

  function Son(name) { //子类
	Father.call(this, name); //父类的this变成了子类的this
  }
  Son.prototype = Father.prototype; //子类原型指向父类原型

  var t = new Son("myname");
  console.log(t.getName()); //验证

会出现问题：

  1. 子类原型新添加方法时，会给父类也添加此方法。
  2. 子类的构造器变成了父类的构造器。

  • 指向父类实例：
  function Father(name) { //父类
    this.name = name;
  }
  Father.prototype.getName = function(){ //父类原型
	return this.name;
  }

  function Son(name) { //子类
	Father.call(this, name); //父类的this变成了子类的this
  }
  //Son.prototype = Father.prototype; //子类原型指向父类原型
  Son.prototype = new Father(); //先实例化，再让子类原型指向父类实例对象
  Son.prototype.constructor = Son; //指向父类实例后会失去构造器，重新指回

  var t = new Son("myname");
  console.log(t); //验证
  1. 代码结果：在子类实例的__proto__中的__proto__中找到继承的父类方法。
    在这里插入图片描述


ES6类的本质

  • 测试类的本质：
  1. 测试代码
  class MyClass{}
  console.log(typeof MyClass); //测试类型
  console.log(MyClass.prototype); //测试原型函数
  console.log(MyClass.prototype.constructor); //测试构造器
  var t = new MyClass();
  console.dir(t); //测试实例

  1. 代码结果：
    在这里插入图片描述

  2. 结论：
    类的本质是函数，可理解为构造函数的另一种形式。
    类有原型对象。
    类有构造器。
    实例有__proto__属性。

  • 使用原型为类添加函数：
  1. 测试代码：
  class MyClass{}
  console.log(MyClass.prototype);

  MyClass.prototype.printNew = function(){
	console.log("new!");
  }

含有变量/函数提升。

  1. 代码结果：
    在这里插入图片描述
  • ES6的类是语法糖：
    两种方法实现同种功能，更便捷的写法，便是语法糖。


ES5新增方法


数组与字符串方法

参考文档：ECMAScript 5 - JavaScript 5


新的对象属性和方法

  • Object.defineProperty

vue中会用到。

	//定义对象
	var obj = {
		id: 1,
		name: "myname"
	};
	
	//旧的方式
	obj.age = 20; //新增属性
	obj.id = 2; //修改属性
	
	//新的方式
	Object.defineProperty(obj, 'sum', { //新增属性
		value: 100
	});
	Object.defineProperty(obj, 'name',{ //修改属性
		value: "mynametwo", //值，默认undefined
		writable: true, //是否可以被重写/修改，默认false
		enumerable: true, //是否可以被枚举，默认false
		configurable:true //是否可以被删除/修改特性true or false，默认false
	})
	
	//get和set
	Object.defineProperty(obj, "name", {
	  get : function() { return name },
	  set : function(value) { name = value}
	});

  1. writable（可修改）：默认false
	var obj = {
		s0: 100
	};
	
	Object.defineProperty(obj, 's1', {
		value: 100
	});
	
	Object.defineProperty(obj, 's2',{
		value: 100, 
		writable: true
	});
	
	//测试
	obj.s0 += 1; //成功，不是通过Object.defineProperty定义的
	obj.s1 += 1; //失败，默认false不允许修改
	obj.s2 += 1; //成功，手动true允许修改
	
	console.log(obj);

  1. enumerable（可枚举/可遍历）：默认false
	var obj = {
		s0: 100
	};
	
	Object.defineProperty(obj, 's1', {
		value: 100
	});
	
	Object.defineProperty(obj, 's2',{
		value: 100, 
		enumerable: true
	});
	
	//测试
	console.log(obj);
	console.log(Object.keys(obj));
	//s0成功，不是通过Object.defineProperty定义的
	//s1失败，默认false不允许枚举
	//s2成功，手动true允许枚举

  1. configurable（可删除/修改特性true or false）：默认false
	var obj = {
		s0: 100
	};
	
	Object.defineProperty(obj, 's1', {
		value: 100
	});
	
	Object.defineProperty(obj, 's2',{
		value: 100, 
		configurable: true
	});
	
	//测试
	delete obj.s0; //成功，不是通过Object.defineProperty定义的
	delete obj.s1; //失败，默认false不允许删除
	delete obj.s2; //成功，手动true允许删除
	
	console.log(obj);

	var obj = {
		s0: 100
	};
	
	Object.defineProperty(obj, 's1', {
		value: 100
	});
	
	Object.defineProperty(obj, 's2',{
		value: 100, 
		configurable: true
	});
	
	//测试
	Object.defineProperty(obj, 's0', { //成功，不是通过Object.defineProperty定义的
		writable: true,
		enumeralbe: true
	});
	Object.defineProperty(obj, 's1', { //失败（异常），默认false不允许更改特性
		enumeralbe: true
	});
	Object.defineProperty(obj, 's2', { //成功，手动true允许更改特性
		writable: true,
		enumeralbe: true
	});
	
	console.log(obj);
大熊软糖M
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
前端进阶-类和对象
moduzhang的博客
11-16 1178
对象可以表示数据和功能。 构造函数 构造函数：结构和语法 function SoftwareDeveloper() { this.favoriteLanguage = 'JavaScript'; } 首先，构造函数并不声明局部变量，而是使用 this 关键字来保存数据。以上函数将为所创建的任何对象添加一个 favoriteLanguage 属性，并为其分配一个默认值 'JavaScript'...
Sublime Text内运行javascript(ES6)及代码检查
fengzijinliang的专栏
08-29 5072
运行javascript前言 调试js代码经常是在浏览器中完成的, 如果编辑器也能完成部分的调试工作, 那我相信前端和node的世界将美好很多. OK, 先上图:实现 列表内容 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加) 添加bui
html通过JavaScript调用java代码
热门推荐
n1007530194的博客
12-01 3万+
使用DWR实现JS调用服务端Java代码 1 DWR简介 DWR全称Direct Web Remoting，是一款非常优秀的远程过程调用(Remote Procedure Call)框架，通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用服务端Java代码。使用它我们可以非常方便的和服务端进行交互，轻松获取服务端返回的数据。  下面是DWR官方网站地址：  http://www.d
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
JavaScript学习笔记
04-10
### JavaScript学习笔记 #### JavaScript简介 JavaScript是一种广泛使用的脚本语言，主要应用于Web前端开发，用来为网页添加交互性。JavaScript不仅可以操作HTML和CSS，还能处理数据、响应用户输入，并与服务器通信...
JavaScript学习笔记之JS对象
10-24
JavaScript是一种基于对象的脚本语言，其中对象是其核心概念之一。在JavaScript中，几乎一切都是对象，包括字符串、数组、...掌握JavaScript对象的知识，对于任何希望深入学习Web前端开发的开发者来说都是必不可少的。
前端学习笔记-黑马程序员JS
最新发布
01-09
"前端学习笔记-黑马程序员JS" ...这篇前端学习笔记涵盖了 JavaScript 的基础知识，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象和 Web APIs 等知识点，为学习 JavaScript 提供了系统的指导。
『前端学习笔记』 HTML5 新特性
猪窝
07-03 4007
参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS 文章目录一级目录二级目录三级目录 一级目录 二级目录 三级目录
『前端学习笔记』 CSS 基础内容
猪窝
07-04 1838
参考：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS 文章目录CSS概述 CSS概述 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 ...
『前端学习笔记』 JavaScript 基础内容
猪窝
07-07 1141
参考：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS 文章目录简介概述实现引入外部引入语法基本输出 简介 概述 JavaScript： JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 ES标准： JavaScript的标准是ECM
『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
猪窝
07-10 1140
参考：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS 参考：JavaScript 参考手册-W3school 文章目录常用事件用法DOM对象HTML DOM操作HTML操作CSSEventListener事件详解事件流事件处理HTML级DOM0级DOM2级IE级事件对象对象定义对象内置对象字符串String日期Date数组Array数学Math(静态类)浏览器对象Window对象计时器history对象location对象screen对象 常用事件 事件 描述 onCl
『前端学习笔记』 HTML5 基础内容
猪窝
07-01 1059
文章目录关于HTML与HTML5元素，标签和属性块元素与内联元素HTML5空文档标签简介h1~h6：标题p：段落a：锚使用a标签做页内跳转img：图片a和img的嵌套使用br：换行span：内嵌文字div：划分属性简介body标签的bgcolor属性：背景颜色a标签的target属性：指定打开方式align：对齐class：类名id：标识符style：样式title：额外信息文字格式化引入CSS样式外部引入：link，rel、type、href内部引入：style，type内联引入：style属性表格列表无
『前端学习笔记』 基础 前端技术简介
猪窝
07-01 841
文章目录前端三剑客HTMLHTML5XHTMLCSSCSS3JavaScriptES6框架jQueryBootstrapReactVue.js 前端三剑客 HTML HTML（Hyper Text Markup Language）称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 HTML5 HTML5
『前端学习笔记』 Bootstrap 使用方法补充
猪窝
07-11 820
参考：【极客学院】一周学会Bootstrap 参考： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 文章目录DOM对象 DOM对象
『前端学习笔记』JavaScript ES6
猪窝
08-06 760
参考视频：2019全新javaScript进阶面向对象ES6 参考文档：ES6入门教程 文章目录letlet与var let 参考文档：JavaScript Let let与var let用途：代替var作为局部变量 比较 var let 作用域 函数内为局部，其余为全局(包括for) 块级{ } 变量提升 声明提升到开头 不提升 允许同名 声明同名变量会覆盖 同一块内不允许同名 从属 window 不属于window ...
『前端学习笔记』 基础 Chrome与IDEA的使用
猪窝
07-01 482
文章目录Chrome检查功能适配移动端的预览三级目录一级目录 Chrome Chrome是谷歌的浏览器，有很多实用的功能。 检查功能 适配移动端的预览 一个Web网页需要在多种客户端（PC、移动端）情况下做出不同的兼容性与调整。适配各种各样的客户端，是前端的主要工作之一。 三级目录 一级目录 ...
『前端学习笔记』 Vue.js 基础
猪窝
08-08 471
参考视频：学 Vue.js 看这个就够了 官方文档：Vue.js 文章目录介绍概念引入基础{{ }}：插值表达式v-cloak：解决插值表达式闪烁问题v-text：引入插值表达式的另一种方法v-html：引入含有html元素的数据v-bind：绑定属性，将字符串解析为变量v-on：绑定事件，将字符串解析为变量 介绍 概念 前端框架 三大框架ARV：Angular、React、Vue 提高开发效率的发展历程：原生JS - Jquery之类的类库 - 前端模板引擎 - Angular.js /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊软糖M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值