ES6_09、class

最新推荐文章于 2023-11-30 11:58:17 发布
最新推荐文章于 2023-11-30 11:58:17 发布
阅读量105 收藏
点赞数
分类专栏： 三、JS类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41921865/article/details/91568467
版权

一、js构造函数的使用回顾

// 构造函数
	function Person(name,age){
		this.name=name;
		this.age=age;
		this.run=function(){
			return `${this.name},跑起来！`
		}
	}
	// 添加方法

	// 写法一
	// Person.prototype.showName=function(){
	// 	return `姓名为：${this.name}`
	// }
	// Person.prototype.showAge=function(){
	// 	return `年龄为：${this.age}`
	// }

	// 写法二：
	Object.assign(Person.prototype,{
		showName(){
			return `姓名为：${this.name}`
		},
		showAge(){
			return `年龄为：${this.age}`
		}
	})

	let p=new Person('张三',25);
	console.log(p.showName(),p.showAge(),p.run());//姓名为：张三 年龄为：25 张三,跑起来！

二、class类

注意事项：

  1. es6里面class没有提升功能，在es5，用函数模拟可以默认函数提升；
  2. this的指向（一般this的指向没有问题）：
    1. 矫正this：fn.call(this指向谁，arg1,arg2...);
    2. fn.apply(this指向谁，[arg1,arg2...])
    3. fn.bind()
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    show(){
        console.log(this.name,this.age);
    }
};
let p=new Person('张三',27);
p.show();

三、class里面的取值函数（getter），存值函数（setter）

class Person{
    constructor(){

    }
    get aaa(){
        return 'aaa属性返回'
    }
    set aaa(val){
        console.log(val,'设置的值')
    }
}
let p=new Person();
p.aaa='123';
console.log(p.aaa)

四、静态方法

静态方法就是类上面的方法

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;

    }
    showName(){
        console.log(`名字：${this.name},年龄：${this.age}`)
    }
    //静态方法
    static aaa(){
        console.log('这是类上面的静态方法')
    }
}
let p=new Person('ty',15);
p.showName();
Person.aaa();//调用静态方法

五、类的继承 extends

1、简单的继承方法：

// 父类
class Person{
	constructor(name){
		this.name=name;
	}
	showName(){
		return `名字为:${this.name}`
	}
}
// 子类  继承
class Student extends Person{
	constructor(name,skill){
		super(name);//子类需要执行的方法
		this.skill=skill;
	}
	showSkill(){
		return `技能是：${this.skill}`
	}
}

let s=new Student('ty','逃学');
console.log(s.showName());
console.log(s.showSkill());

 2、子类里面有和父类一样的方法的处理方式

子类与父类方法同名，当调用的时候父类的方法就不会执行，可以使用super.方法名()来执行

//父类
class Person{
	constructor(name){
		this.name=name;
	}
	showName(){
		return `【父类执行】名字为：${this.name}`
	}
}
// 子类
class Student extends Person{
	constructor(name,skill){
		super(name);
		this.skill=skill;
	}
	showSkill(){
		return `【子类执行】技能是：${this.skill}`
	}
	showName(){
		let f=super.showName();//执行父类的方法
		console.log(f);
		return `【子类执行】名字为：${this.name}`
	}
}

let s=new Student('zs','上学');
console.log(s.showName());
console.log(s.showSkill());

 六、案例 拖拽的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类的继承实现拖拽</title>
</head>
<style>
	body{
		width: 100%;
		height: 400px;
		border:solid 1px pink;
		padding:0;
		margin:0;
	}
	div.box{
		width: 50px;
		height: 50px;
		border:solid red 1px;
		background-color:pink;
		position:absolute;
		top:0;
		cursor:pointer;
	}
	.left{
		left:0;
	}
	.right{
		right:0;
	}
</style>
<body >
	<div id="div1" class="box left">DIV1</div>
	<div id="div2" class="box right">DIV2</div>
</body>
</html>
<script>
	class Drag{
		constructor(id){
			this.oDiv=document.querySelector(id);
			this.disX=0;
			this.disY=0;
			this.init();
		}
		init(){
			this.oDiv.onmousedown=function(ev){
				// this.disx=ev.clientX-this.oDiv.offsetLeft-25;
				// this.disY=ev.clientY-this.oDiv.offsetTop-25;
				document.onmousemove=this.fnMove.bind(this);
				document.onmouseup=this.fnUp.bind(this);
				return false;
			}.bind(this)//修改this指向s
		}
		fnMove(ev){
			// console.log(ev.clientX,this.disX,ev.clientY,this.disY)
			
			this.oDiv.style.left=ev.clientX-25+'px';
			this.oDiv.style.top=ev.clientY-25+'px';
		}
		fnUp(ev){
			document.onmousemove=null;
			document.onmouseup=null;

		}
	}
	class limitDrag extends Drag{
		fnMove(ev){
			super.fnMove(ev);
			if(this.oDiv.offsetLeft<=0){
				this.oDiv.style.left=0;
			}
			if(this.oDiv.offsetTop<=0){
				this.oDiv.style.top=0;
			}
			if(this.oDiv.offsetLeft>document.body.clientWidth-50){
				this.oDiv.style.left=document.body.clientWidth-50 +'px';
			}
			console.log(this.oDiv.offsetTop,document.body.offsetHeight)
			if(this.oDiv.offsetTop>document.body.offsetHeight-50){
				console.log('2222rrrrrs')
				this.oDiv.style.top=document.body.offsetHeight-50 +'px';
			}
		}	
	}
	new Drag('#div1');
	new limitDrag("#div2");
</script>

 

 

 

baidu_41921865
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6之class
qq_46366496的博客
09-27 164
ES6中的类 目录ES6中的类class与构造函数类与构造函数对比静态方法和静态属性私有方法和私有属性类的取值函数（getter）和存值函数（setter）new.target类注意点 class与构造函数 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //类的写法 class Point{ getName(){ return 'lili'; }
ES6 Class
amuist_ting的博客
09-22 94
ES6引入了Class类的概念，作为对象的模板，通过class关键字，可以定义类；基本上，ES6的class可以看作只是一个语法糖 constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法；一个类必须有contructor方法，如果没有显示定义，一个空的constructor方法会被默认添加 类的实例 与ES5一样，类的所有实例共享一个原型对象 可以通过实例的__proto__属性为类添加方法 可以通过Object.getProptotypeOf()方法.
Class 的基本语法
Geordies的博客
02-09 688
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
ES6--class类（详解/看完必会）
蜗牛~~
02-22 8772
ES6中class类的学习，看完必会
es6（五）—— class（类）详解
weixin_44784401的博客
02-07 3076
JavaScript 中 class（类）详解
详解ES6的类
lisusususuli的博客
02-20 1706
基础 一个简单的示意图 ES5实现构造函数和实例对象 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';}; var p = new Point(1, 2); ES6...
JS es6的Class类详解
热门推荐
weixin_44691513的博客
09-05 3万+
文章目录JS es6的Class类详解class基本语法Class的基本语法之constructorClass的基本语法之类的调用方式Class的基本语法之getter和setterClass的基本语法之类的属性名Class的基本语法的特别注意点Class的静态属性和方法Class的私有方法和私有属性构造函数的新属性构造函数的新属性 JS es6的Class类详解 class基本语法 JavaScript 语言中，生成实例对象的传统方法是通过构造函数和原型的组合模式.ES6 提供了更接近传统语言（java）
es6_react_class:ES6 上的类和 ForwardJS 上的 React
07-16
在 React 中使用 ES6 概括 本次演讲的目的是： 教你React。 它假设没有先验知识。 教你JSX。 它让编写 React 变得更加愉快。 教你（一些）ES6。 本演示文稿仅假设熟悉 ES5。 教你用 ES6 做 React。 它向您展示了...
解读ES6中class关键字
08-28
主要介绍了ES6中class关键字,class是es6引入的最重要特性之一。本文通过实例代码给大家详解，需要的朋友可以参考下
ES6 class的应用实例分析
10-16
主要介绍了ES6 class的应用,结合实例形式分析了class在ES6面向对象程序设计中定义类的相关操作技巧,需要的朋友可以参考下
ES6中class类用法实例浅析
08-30
主要介绍了ES6中class类用法,结合实例形式分析了ES6中类的实现方法与相关语法使用技巧,需要的朋友可以参考下
ES6中的class类详解
happy81997的博客
01-07 5265
目录 一、class简介 二、静态方法和静态属性 2.1 静态方法 2.2 静态属性 三、class继承extends 四、class的取值函数getter和存值函数setter 五、Super关键字 六、注意事项： 一、class简介 传统的JS只有对象的概念，没有class类的概念，因为JS是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象。 ES6引入了c...
ES6中class类、类的继承extends、多态、字面量的增强、解构、let/const、字符串模板、函数的默认参数、展开语法、数值、Symbol使用、Set、Map、es7-13总结
米儿的博客
11-17 2101
一、认识class定义类 我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。 在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类； 但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已； 可以使用两种方式来声明类：类声明和类表达式 // 类的声明 class Person { } // 类的表达式 var Animal = class { } 类和构造函数的异同 类的一些特性和我们的构造函数的特性其实是一
ES6 中的类（class）
TKOP_的博客
04-16 1194
ES6 引入的 class 关键字具有定义类的能力。类是 ECMAScript 中新的基础性语法糖。虽然 ES6 表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的依旧是原型和构造函数的概念。（笔记内容参考《JavaScript 高级程序设计（第4版）》章节8.4 类以前在笔记《js 中原型、原型链和继承概念（详细全面）》中简要提过部分内容，这里系统看一次。类声明和类表达式。两种方式都需要使用 class 关键字加大括号定义。类表达式与函数表达式类似，在它们被求值前都不能被引用。
Es6语法 class类(详细)
最新发布
2302_76609856的博客
11-30 1049
class类的定义和函数一样分为命名类和匿名类//命名类//匿名类注意：函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会。需要先声明类，然后再访问它class类的本质其实就是函数。
ES6之Class详解篇
AK的博客
08-12 4527
1.类简介 ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 类的数据类型就是函数，类本身就指向构造函数。 使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。 2.Class的基本语法 class Point { constructor(x,y){ this.x = x; this.y = y; } toString(){ return `${thi
js---类
cjx177187的博客
06-27 251
js是一个基于面向对象的单线程的脚本语言 基于面向对象 js不是面向对象 它的使用想跟面向对象用法一样 但是底层是原型的思想 es6为了更像面向对象语言（1）概述（2）类定义（3）类的主体（4）类的继承......
ES6 Class介绍
过客如期的博客
03-27 259
关于ES6的class类的学习和总结
ES6的class用法总结
txwsmsm7023_的博客
07-02 1064
ES6新增class关键字，class关键字也是原型对象的一个语法糖，让原型对象更加的清晰， 我们先回顾一下原型对象，如下图，原型对象是不是包含一个constructor函数，这个函数的所引指向的是函数的构造方法，所以 我们先明确一下，所谓的类其实就是原型对象呢，对类的初始化是调用的构造方法constructor函数，故生成的是构造函数的实例对象 用class定义一个新...
es6 class类
09-20
ES6中的class（类）是一种对象的模板，通过class关键字可以定义类。它可以看作是一种语法糖，使对象原型的写法更加清晰、更像面向对象编程的语法。类的定义不可重复声明，必须在访问之前对类进行定义，否则会报错。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值