重学前端学习笔记(八)--JavaScript中的原型和类
笔记说明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。
一、什么是原型?
1.0、定义
原型是指一个词语或一个类型意义的所有典型模型或原形象,是一个类型的组典型特征
1.1、基于类的编程语言
诸如 C++、Java 等流行的编程语言是使用类的方式来描述对象,
基于类
的编程提倡使用一个关注分类和类之间关系开发模型。
1.2、基于原型的编程语言
如 JavaScript 编程语言是利用原型来描述对象,
基于原型
的编程看起来更为提倡程序员去关注一系列对象实例的行为,而后才去关心如何将这些对象,划分到最近的使用方式相似的原型对象,而不是将它们分成类。
1.3、原型系统的“复制操作”有两种实现思路
- 一个是并不真的去复制一个原型对象,而是使得新对象持有一个原型的引用
- 另一个是切实地复制对象,从此两个对象再无关联。
javaScript选择了第一种方式。
二、JavaScript 的原型
2.0、原型系统的两条概括
- 如果所有对象都有私有字段
[[prototype]]
,就是对象的原型 - 读一个属性,如果对象本身没有,则会继续访问对象的原型,直到原型为空或者找到为止。
2.1、三个内置函数
可以利用下面三个方法,更直接地访问操纵原型,来实现抽象和复用。
Object.create
根据指定的原型创建新对象,原型可以是null
Object.getPrototypeOf
获得一个对象的原型Object.setPrototypeOf
设置一个对象的原型
winter举了用原型来抽象猫和虎的例子:
var cat = {say() {console.log("meow~");},jump() {console.log("jump");}
}var tiger = Object.create(cat, {say: {writable: true,configurable: true,enumerable: true,value: function(){console.log("roar!");}}
})var anotherCat = Object.create(cat);anotherCat.say(); // meow~var anotherTiger = Object.create(tiger);anotherTiger.say(); // roar!复制代码
三、早期版本中的类与原型
3.0、“类”的定义是一个私有属性 [[class]]
所有具有内置 class 属性的对象:(ES3和之前版本)
var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log([o, n, s, b, d, arg, r, f, arr, e].map(v => Object.prototype.toString.call(v))
)复制代码
语言使用者唯一可以访问 [[class]] 属性的方式是 Object.prototype.toString
。
3.1、[[class]]
私有属性被 Symbol.toStringTag
代替
可以查看MDN文档Symbol.toStringTag以及Object.prototype.toString的介绍:(ES5开始)
var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + ""); // [object MyObject]
复制代码
上面这段代码创建了一个新对象,并且给它唯一的一个属性 Symbol.toStringTag
,用字符串加法触发了Object.prototype.toString
的调用,发现这个属性最终对 Object.prototype.toString
的结果产生了影响。
3.2、new运算做了什么?
- 1、以构造器的
prototype
属性(注意与私有字段[[prototype]]
的区分)为原型,创建新对象 - 2、将
this
和调用参数传给构造器,执行 - 3、如果构造器返回的是对象,则返回,否则返回第一步创建的对象。
用构造器模拟类的两种方法:
// 1、在构造器中修改 this,给 this 添加属性function c1() {this.p1 = 1;this.p2 = function(){console.log(this.p1);}
}
var o1 = new c1;
o1.p2(); // 1// 2、修改构造器的 prototype 属性指向的对象,它是从这个构造器构造出来的所有对象的原型。function c2() {
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function() {console.log(this.p1);
}var o2 = new c2;
o2.p2(); // 1复制代码
四、ES6 中的类
4.0、类的基本写法
class Rectangle {constructor(height, width) {this.height = height;this.width = width;}// Getterget area() {return this.calcArea();}// MethodcalcArea() {return this.height * this.width;}
}复制代码
4.1、类的继承能力
class Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + ' makes a noise.');}
}class Dog extends Animal {constructor(name) {super(name); // call the super class constructor and pass in the name parameter}speak() {console.log(this.name + ' barks.');}
}let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.复制代码
上面代码调用子类的 speak 方法获取了父类的 name。如果对于class
还想了解更多,可以查看MDN文档Classes部分。
个人总结
其实对于这一部分很是不明白,也不清楚,对于这些js基础性的东西还是要多下下功夫才行,毕竟winter的重学前端真心不错,对我来说进行查漏补缺,看清自己的水平很有帮助,路还很长,还要加油呀!!!
转载于:https://juejin.im/post/5cd02d63f265da03b36efc18
重学前端学习笔记(八)--JavaScript中的原型和类相关推荐
- 重学前端-学习笔记-JavaScript对象
说明 重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征 对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
- 重学前端学习笔记(二十二)--选择器的机制
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- 重学前端学习笔记(十三)--浏览器工作解析(三)
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- 重学前端学习笔记(三十六)--Flex 布局
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- 重学前端学习笔记(五)-JavaScript原型
JavaScript原型 中文中有个成语叫做"照猫画虎",这里的猫看起来就是虎的原型. 最为成功的流派是使用"类"的方式来描述对象,这诞生了诸如 C++.Jav ...
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
- 前端学习笔记之 JavaScript WebAPIs(整理)
目录 篇一 一.鼠标事件 二.获取元素的属性值 三.设置元素的属性值 四.移除属性 五.H5自定义属性 1. 设置自定义属性 2. 获取自定义属性 六.节点操作 1.两种方法的区别 2.节点概述 3 ...
- web前端学习笔记之JavaScript
文章目录 1 JavaScript简介 2 JS基础 3 JS代码编写位置 3.1 行内式 3.2 内嵌式 3.3 外联式 4 基本语法 5 字面量和变量 5.1 字面量 5.2 变量 6 标识符 7 ...
- html5学习笔记---05.JavaScript 中的面向对象,继承和封装
05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言 类:JavaScript 对象很抽象,所以下 ...
最新文章
- 利用Python实现十大经典排序算法(附代码流程)
- PXE部署映像(WinPE 2.0)
- leetcode每日刷题计划-简单篇day8
- 微信小程序实现图书管理系统
- ubuntu下eclipse打开window下的java文件,注释内容为乱码,解决方法
- Java工程师学习步骤
- 电脑中病毒后被隐藏的文件的显示
- 很好的理解遗传算法的样例
- Linux 设备驱动开发 —— Tasklets 机制浅析
- 【Asp.net Core】在 Linux 子系统中安装 nginx 并配置反向代理
- 常用的CSS Hack技术集锦
- 有道词典pc离线包打包下载_【超福利】安卓手机上最好用的离线词典
- mac下复制粘贴需要多次的问题
- GPU深度报告,三大巨头,十四个国内玩家一文看懂【物联网智商精选】
- QT 科学计算器与谷歌拼音输入法实现
- “九把锁”还是春秋时期的黄金密道
- FFMPEG 实现混音,加水印,加文字,模糊水印任意滤镜组合
- CSS图片响应悬停效果
- 玩转基因组浏览器之初识IGV
- 推荐 :教你用神经网络求解高级数学方程!
热门文章
- linux嵌入式c网络编程,嵌入式Linux网络编程之:网络高级编程
- linux要求关闭httpd服务,Apache2.4.4的安装及实现service和chkconfig系统控制httpd开启关闭...
- C语言讲义——字符串
- java中long类型转换为int类型
- codeforces 919E Congruence Equation
- ubuntu14.04 boost动态库找不到 libboost_system.so.1.58.0
- 解析php混淆加密解密的手段,如 phpjm,phpdp神盾,php威盾
- LeetCode—211. 添加与搜索单词 - 数据结构设计
- linux安装ffmpeg版本太多,Linux安装FFmpeg的方法
- 华为p40 pro原理图_4188起 华为P40/Pro/Pro+国行发布 顶配8888 河图正式上线!