学习ES6[尚硅谷二]笔记
24.class类
<!--
//(1)通过class 关键字创建类，类名我们还是习惯性定义首字母大写
//(2)类里面有个constructor函数,可以接受传递过来的参数，同时返回实例对象
//(3)constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
//(4)生成实例new不能省略
//(5)最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function
-->
<script>
class Star{
constructor(uname,age){
this.uname=uname
this.age=age
}
sing(song){
console.log(this.uname+song);
}
}
//2.利用类创建对象 new
var ldh= new Star("刘德华",18)
console.log(ldh)
var zxy=new Star('张学友',20)
console.log(zxy)
//(1)我们类里面所有的函数不需要写function
//(2)多个函数方法之间不需要添加逗号分隔
ldh.sing("冰雨");
zxy.sing("李香兰");
</script>
25.class中的extend
<!--
super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
-->
<script>
/*
class Father {
constuctor (){
}
money(){
console.log(100)
}
}
class Son extends Father{}
var son=new Son()
son.money()
*/
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y)
}
}
class Son extends Father{
constructor(x,y){
super(x,y)//调用了父类中的构造函数
}
}
var son=new Son(1,2)
son.sum();
</script>
26.super关键字
<script>
class Father{
say(){
return '我是爸爸'
}
}
class Son extends Father{
say(){
console.log(super.say()+'的儿子')
//super.say()就是调用父类中的普通函数 say()
}
}
var son=new Son();
son.say();
</script>
27.super应用
<script>
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
add(x,y){
return this.x+this.y
}
}
class Son extends Father {
constructor(x,y){
super(x,y);
this.x=x;
this.y=y;
}
substruct(x,y){
return this.x-this.y
}
}
var son=new Son(5,2)
console.log(son.substruct())
console.log(son.add())
</script>
28.class属性
<!--
1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2.类里面的公有的属性和方法一定要加this使用。
-->
<script>
var _that
var that
class Star{
constructor(uname,age){
that=this ;
console.log(this)
this.uname=uname;
this.age=age;
//this.sing()
this.btn=document.querySelector("button");
this.btn.onclick=this.sing;
}
sing(){
//这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(this)
console.log(that.uname)
}
dance(){
//这个dance里面的this指向的是实例化对象ldh因为ldh调用了这个函数
_that=this
console.log(this)
}
}
var ldh=new Star("刘德华")
ldh.dance()
</script>
30.静态成员和实例成员
<script>
//构造函数中的属性和方法我们称为成员，成员可以添加
function Star(uname,age){
this.uname=uname;
this.age=age;
this.sing=function(){
console.log("我会唱歌");
}
}
var ldh=new Star("刘德华",18)
//实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
//实例成员只能通过实例化的对象来访问
console.log(ldh.uname)
ldh.sing();
//2.静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex="男"
//静态成员只能通过构造函数来访问
console.log(Star.sex)
console.log(ldh.sex)//不能通过对象来访问
</script>
31.构造函数问题
<script>
//构造函数中的属性和方法我们称为成员，成员可以添加
function Star(uname,age){
this.uname=uname;
this.age=age;
this.sing=function(){
console.log("我会唱歌");
}
}
var ldh=new Star("刘德华",18)
//实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
//实例成员只能通过实例化的对象来访问
console.log(ldh.uname)
ldh.sing();
//2.静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex="男"
//静态成员只能通过构造函数来访问
console.log(Star.sex)
console.log(ldh.sex)//不能通过对象来访问
</script>
32.构造函数原型
<script>
function Star(uname,age){
this.uname=uname;
this.age=age;
}
//很多情况下，我们需要手动的利用constructor这个属性指回 原来的构造函数
// Star.prototype.sing=function(){
// console.log("我会唱歌")
// }
// Star.prototype.movie=function(){
// console.log("我会演电影")
// }
Star.prototype={
//如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor
//指回原来的构造函数
constructor:Star,
sing:function(){
console.log("我会唱歌")
},
movie:function(){
console.log("我会演电影")
}
}
var ldh=new Star("刘德华",26)
console.log(Star.prototype.constructor)
console.log(ldh.__proto__.constructor)
ldh.sing()
ldh.movie()
</script>
</body>
</html>
33.原型链
<script>
function Star(uname,age){
this.uname=uname;
this.age=age;
}
Star.prototype.sing=function(){
console.log("我会唱歌")
}
var ldh=new Star("刘德华",18)
//1.只要是对象就有__prpto__原型，指向原型对象
console.log(Star.prototype);
console.log(Star.prototype.__proto__===Object.prototype);
//2.我们Star原型对象里面的__proto__原型是指向的是 Object.prototype
console.log(Object.prototype.__proto__)
</script>
34.js查找机制
<!--
JavaScript的成员查找机制
1.但访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性，
2.如果没有就查找他的原型(也就是__proto__指向的prototype原型对象)
3.如果还没有就查找原型对象的原型(Object的原型对象)
4.依次类推一直找到Object为止(null)
-->
<script>
function Star(uname,age){
this.uname=uname;
this.age=age;
}
Star.prototype.sing=function(){
console.log("我会唱歌")
}
Star.prototype.sex="男"
//Object.prototype.sex="男"
var ldh=new Star("刘德华",18)
ldh.sex="男"
console.log(ldh.sex)
console.log(Object.prototype);
console.log(ldh);
console.log(Star.prototype)
console.log(ldh.toString())
</script>
35.原型对象中this指向
<script>
function Star(uname,age){
this.uname=uname;
this.age=age;
}
var that;
Star.prototype.sing=function(){
console.log("我会唱歌")
that=this;
}
var ldh=new Star('刘德华',18)
//1.在构造函数中，里面this指向的是对象实例 ldh
ldh.sing();
console.log(that===ldh)
//2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>
36.扩展内置对象方法
<!--
扩展内置对象
可以通过原型对象。对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能
注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.rptotype.xxx=function(){}的方式
-->
<script>
//原型对象的应用 扩展内置对象方法
Array.prototype.sum=function(){
var sum=0;
for(var i=0;i<this.length;i++){
sum+=this[i]
}
return sum ;
}
// Array.prototype={
// sum:function(){
// var sum = 0;
// for (var i = 0; i < this.length; i++) {
// sum += this[i]
// }
// return sum;
// }
// }
var arr=[1,2,3];
console.log(arr.sum());
console.log(Array.prototype);
var arr1=new Array(11,22,33);
console.log(arr1.sum());
</script>
37.call方法
<script>
//call方法
function fn(x,y){
console.log("我想喝手磨咖啡");
console.log(this)
console.log(x+y)
}
var o={
name:'andy'
}
// fn()
//1.call()可以调用函数
// fn.call()
//2.call()可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
fn.call(o,1,2)
</script>
38.借用父构造函数继承特性
<script>
//借用父构造函数继承属性
//1.父构造函数
function Father(uname,age){
this.uname=uname;
this.age=age;
}
Father.prototype.money=function(){
console.log(100000)
};
//2.自构造函数
function Son(uname,age,score){
//this指向子构造函数的对象实例
Father.call(this,uname,age);
this.score=score;
//this.super(Father)
}
// Son.prototype=Father.prototype; 这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟着一起变化
Son.prtotype=new Father();
//如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的原型对象
Son.prototype.constructor=Son;
//这是自构造函数专门的方法
Son.prototype.exam=function(){
console.log('孩子要考试');
}
var son=new Son('刘德华',18,100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);
</script>
39.forEach方法
script>
//forEach迭代(遍历)数组
var arr=[1,2,3];
sum=0;
arr.forEach(function(value,index,array){
console.log('每个数组元素'+value);
console.log('每个数组元素的索引号'+index);
console.log('数组本身'+array);
sum+=value;
})
console.log(sum)
</script>
40.filter数组
<!--
3.2数组方法
迭代（遍历）方法：forEach0、map0、filter0、some0、every0;
array.filter(function(currentValue, index, arr))
·filterO方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
·注意它直接返回一个新数组
● currentValue:数组当前项的值
● index：数组当前项的索引
●arr：数组对象本身
-->
<script>
//filter 筛选数组
var arr=[12,66,4,88,3,5,7];
var newArr=arr.filter(function(value,index){
//return value>=20;
return value%2===0;
});
console.log(newArr)
</script>
41.some函数
<script>
//some查找数组中是否满足条件的元素
var arr=[10,30,4];
var flag=arr.some(function(value){
//return value>=20;
return value<3;
})
console.log(flag);
var arr1=['red','pink','green'];
var flag1=arr1.some(function(value){
return value==="pink"
})
console.log(flag1)
//1.filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
//2.some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素
//就终止循环
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现