批改状态:合格
老师批语:
let item1 = {data:{name: '手机',price:6000,}}
创建一个对象,在这个对象里面有两个属性,接下来为这两个属性创建一个接口用来在外部进行读写操作
创建一个方法 访问并输出上方的name的值(这个方法要写在item1里面)
getName(){return item1.data.name;}
创建一个方法,调用上方的name.给一个参数,这个参数用于在外部访问时,修改name的值
setName(d){this.data.name = d;}
通过访问接口访问并进行读写操作
console.log(item1.getName());item1.setName(20000);console.log(item1.data.name);
为属性赋值还有另一种方式 可以在预先声明对象时,声明一个空对象,里面没有不声明属性,然后在后期往里面填入属性
就像下面的操作,事先声明了一个对象C 和对象C里面的属性data,两个都是空的,并没有任何属性,然后再通过外部的访问进行读写操作,往里面添加对应的属性
let c={};c.data={};c.data.name = '鼠标';console.log(c.data.name);
专用于创建对象的函数,叫做构造函数
下方的User1 就是一个构造函数
创建一个新函数User1.里面包含一个方法,这个方法有两个参数,然后在方法里面创建两个属性,name,email,两个属性没有具体的值,他们的值等待外部的传入
let User1 = function (name,email) {this.name = name,this.email = email,this.fangfa = function(){return `${this.name}+${this.email}`;};};let user2 = new User1('杨老师',1966666666) ;console.log(user2);let user3 = new User1('李老师',196666) ;console.log(user3);
声明结束后,在后续操作中调用这个构造函数并且传参
在新创建的对象user2和user3中,属性不同,但是都调用了同一个方法,在实际的操作中,只需要保留一个方法副本并共享给所有的实例(实例就是通过同一个构造函数创建的对象)即可。
经过上方的操作,我们就知道了有的方法可以通过父级共享给他所有的子集,这样就不需要给他的每一个子集都创建一个相同的方法,造成代码冗余
调用对象的constructor方法,可以查看这个对象的构造器(构造函数),来知道这个对象的父级
console.log(user2.constructor);
所有的函数都有一个原型属性(prototype)这个属性对于构造函数来说特别重要
在构造函数中,可以将对象的共享成员(方法,属性等)挂载到prototype原型属性上,被所有当前构造函数的实例所共享
let User1 = function (name,email) {this.name = name,this.email = email};User1.prototype.fangfa = function(){return `${this.name}+${this.email}`;};let user2 = new User1('杨老师',1966666666) ;console.log(user2);let user3 = new User1('李老师',196666) ;console.log(user3);
将这串代码与上方代码代码对比 可以看出,直接将之前代码中的公用的方法,提取出来直接挂载到prototype原型上,实现了共享
通过原型属性,将父级函数的方法,让子类函数调用,这就叫继承
let a=function(){};a.prototype.sum=function(){return this.a+this.b;};let C =function(a,b){this.a=a;this.b=b;};C.prototype = a.prototype;let d = new C(100,200);console.log(d.sum());
上方代码解释:
1.首先创建一个构造函数a,然后在a的原型属性上挂载一个方法sum,对a和b进行运算,但是并没有给a和b赋值
2.然后创建一个构造函数C,里面有两个参数a和b,
3.然后通过C.prototype = a.prototype; 将C的原型与a的原型进行绑定,将C视为a的子类函数,并继承a的原型方法
4.然后通过C 创建一个新实例d 并给其中的a和b两个参数赋值
5.然后输出d函数中的sum方法,这个方法继承自a,是a挂载到原型上并继承给子类的方法。
在js中,没有类的说法,所以JS中的类就是函数
但是在js中声明类也是用class(这是一个ES6的语法)
class Meta{// 公共成员username='杨老师';// 构造方法、实例初始化constructor(name,email){// 这是自由属性this.name = name;this.email = email;}// 原型成员也叫共享成员getInfo(){return this.name+this.email;}// 静态成员(静态成员只能通过构造函数方法访问)// static 是关键字用于创建静态成员static a='李老师';};// 开始实例化const c =new Meta('张老师',19666);// 调用其中的原型方法console.log(c.getInfo());// 调用静态成员console.log(Meta.a);
代码解释:
创建一个类Meta,然后创建一个构造方法(使用关键字constructor),
然后创建一个原型成员(方法或者属性)getInfo来进行运算操作
使用static关键字创建静态成员
// extends 是类的扩展(继承)关键字class Meta1 extends Meta{// 在父类的基础上 多了一个参数passwordconstructor(name,email,password){// super()会调用父类的构造器来初始化这个实例(使用于在父类中已经初始化过的参数)super(name,email);// 对新增的参数进行初始化this.password=password;}getInfo(){// 同样的 输出的时候也可以使用super 来进行调用父类的参数return `${super.getInfo()},${this.password}`;}}const d=new Meta1('陈老师',196777,996996);console.log(d.getInfo());
用一个数组变量(模板)来接收一个数组的值
let [name,name2] = ['王老师','张老师'];console.log(name,name2);
上面的操作是初始化,变量的特点就是可以重新赋值,改变他的值
下面的代码就对上方代码进行了更新
[name,name2] = ['李老师','张老师'];console.log(name,name2);
和数组解构是差不多的
let{id,calss,na} = {id:1,calss:2,na:3};console.log(id,calss,na);
更新
需要注意的是更新的时候,因为大括号不能直接写,所以需要在更新解构的表达式外部用一堆小阔号包围,不然会报错
({id,calss,na} = {id:1,calss:5,na:3});console.log(id,calss,na);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号