当前位置:网站首页>ES类和对象、原型
ES类和对象、原型
2022-07-07 07:20:00 【小白啥时候能进阶成功】
一、“前端开发”名称的由来
Web1.0时代的网页制作:网页主要是静态页面,无法和服务器进行交互。网站开发工具(网页三剑客):DreamWeaver、FireWorks、Flash。
- Web2.0时代的前端开发:现在的页面开发,无法从开发维度还是开发方式上,更接近传统的网站后台开发,因此不再叫做“页面制作”,而是“前端开发”。新三剑客:HTML、CSS和JavaScript。
- HTML:超文本标记语言,是一门描述性语言。
- CSS:层叠样式表,是用来控制网页外观的一种技术。
- JavaScript:即JS,是一种嵌入到 HTML页面中的脚本语言,由浏览器一边解释一边执行。
HTML用于控制网页的结构,CSS用于控制网页的外观,而JavaScript控制着网页的行为。
二、ES的类和对象
1、Class关键字;
2、constructor构造函数;
3、方法前不需要function关键字;
4、方法之间不需要逗号
5、extends继承和super()关键字:extends表示继承(C中的public)
<script type="text/javascript">
class Father{
constructor(x,y)
{
this.x = x;
this.y =y;
}
sum()
{
console.log("father's sum:"+(this.x+this.y));
}
song()
{
console.log("father is sing qinghuaci");
}
}
class Son extends Father{
constructor(x,y)
{
super(x,y); //调用了父类中的构造函数
}
}
var son1 = new Son(3,4);
son1.sum();
son1.song();
</script>
6、super关键字: 在子类的构造器中,通过调用super(),则向父类的构造函数中传递参数。
class Son extends Father{
constructor(x,y)
{
super(x,y); //1、调用了父类中的构造函数,赋值给父类的this对象
}
}
7、super关键字:通过使用“super.属性”或“super.方法”的方式,显示调用父类中声明的属性和方法。
class Son extends Father{
song()
{
console.log("son is sing qinghuaci");//2、子类的song方法
super.song();//3、调用父类的song方法
}
}
子类调用方法时,先遍历子类是否有该函数,如果有,则执行子类的函数。如果没有,则遍历父类,执行父类的函数。
8、super必须放在子类的this前面
class Son extends Father{
constructor(x,y)
{
super(x,y); //1、调用了父类中的构造函数,赋值给父类的this对象
this.x = x; //2、将x,y传递给自己的this对象
this.y = y;
}
}
9、this的指向问题
(1)constructor里面的this指向的是创建的实例对象;
(2)方法中的this指向的是调用者;例如:下面的例子中,sum方法中的this指向的是这个按钮,因为按钮调用了这个方法。
<!DOCTYPE html>
<html>
<head>
<title>CanvasTest</title>
<meta charset="UTF-8">
<div class="items">
<button>Play</button>
</div>
</head>
<body>
<script type="text/javascript">
class Father{
constructor(x,y)
{
this.x = x;
this.y =y;
this.btn = document.querySelector("button");
this.btn.onclick = this.sum;
}
sum()
{
//这个sum方法中的this指向的是这个按钮,因为这个按钮调用了sum函数
console.log(this);
console.log("father's sum:"+(this.x+this.y));
}
}
var f = new Father(2,5);
</script>
</body>
</html>
三、构造函数和原型
1、不同对象的方法会重复申请内存进行创建
function Star(){
this.name = uname;
this.age = age;
this.sing=function()
{
console.log("sing song");
}
}
var ldh = new Star("刘德华");
var zxy = new Star("张学友");
ldh.sing();
zxy.sing();
console.log(ldh.sing() ==== zxy.sing());//false,是两个函数
ldh和zxy的song方法分别在两个地址。
2、构造函数原型
每一个构造函数都有一个prototype属性,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
构造函数通过原型分配的函数是所有对象所共享的。可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。
function Star(uname,age){
this.name = uname;
this.age = age;
}
//song放到了构造函数的原型对象里面了。
Star.prototype.sing = function()
{
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
ldh.sing();//在构造函数的原型对象上找到song方法
zxy.sing();
一般情况下,我们的公共属性定义到构造函数里面,公共方法我们放到原型对象身上。
3、对象原型 __proto__
实例化后的对象系统自动添加一个属性:__proto__,他指向构造函数的原型对象prototype。
对象的属性__proto__和构造函数的原型对象prototype等价。
function Star(uname,age){
this.name = uname;
this.age = age;
}
Star.prototype.song = function()
{
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
console.log(ldh.__proto__ === Star.prototype);//true;
ldh.sing();
查找规则:首先看ldh对象身上是否有sing方法,如果有,执行对象的sing方法。如果没有,去构造函数原型对象身上查找。
4、constructor函数
对象原型(__proto__)和构造函数原型对象(prototype)里面都有一个constructor属性;constructor我们称为构造函数,因为它指回构造函数本身。
作用一:constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。
function Star(uname,age){
this.name = uname;
this.age = age;
}
// 把原型对象赋值成一个新的对象
Star.prototype.sing(){
console.log("sing song");
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
运行结果:
作用二:很多情况下,我们需要手动地利用constructor这个属性指回原来的构造函数。
function Star(uname,age){
this.name = uname;
this.age = age;
}
// 把原型对象赋值成一个新的对象
Star.prototype = {
sing:function(){
console.log("sing song");
},
movie:function(){
}
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
结果:
原型对象的constructor指向的不是Star,是因为Star的原型对象被覆盖了,因此原型对象中的constructor不再指向Star.
解决方法:
function Star(uname,age){
this.name = uname;
this.age = age;
}
// 把原型对象赋值成一个新的对象
Star.prototype = {
constructor:Star,//指回原先的构造函数
sing:function(){
console.log("sing song");
},
movie:function(){
}
}
var ldh = new Star("liudehua");
var zxy = new Star("张学友");
console.log(ldh.__proto__.constructor);
console.log(Star.prototype.constructor);
结果:
总结:如果修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动地利用constructor指回原来的构造。
5、构造函数、实例、原型对象三者之间的关系
边栏推荐
- ORM--分组查询,聚合查询,查询集QuerySet对象特性
- Delete a record in the table in pl/sql by mistake, and the recovery method
- Natapp intranet penetration
- 企业实战|复杂业务关系下的银行业运维指标体系建设
- 大佬们,请问 MySQL-CDC 有什么办法将 upsert 消息转换为 append only 消
- 网上可以开炒股账户吗安全吗
- Arcgis操作: 批量修改属性表
- Write VBA in Excel, connect to Oracle and query the contents in the database
- Huffman encoded compressed file
- [Frida practice] "one line" code teaches you to obtain all Lua scripts in wegame platform
猜你喜欢
随机推荐
Arcgis操作: 批量修改属性表
Win10安装VS2015
Do you have a boss to help look at this error report and what troubleshooting ideas are there? Oracle CDC 2.2.1 flick 1.14.4
Analyze Android event distribution mechanism according to popular interview questions (I)
使用BigDecimal的坑
Gym - 102219J Kitchen Plates(暴力或拓扑序列)
Can flycdc use SqlClient to specify mysqlbinlog ID to execute tasks
Guys, have you ever encountered the case of losing data when Flink CDC reads mysqlbinlog? Every time the task restarts, there is a probability of losing data
第十四次试验
How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
arcgis操作:dwg数据转为shp数据
Main (argc, *argv[]) details
C# XML的应用
Liunx command
Qualifying 3
终于可以一行代码也不用改了!ShardingSphere 原生驱动问世
2020浙江省赛
CDZSC_ 2022 winter vacation personal training match level 21 (1)
CDZSC_ 2022 winter vacation personal training match level 21 (2)
Internship log - day07