ES6-Class(类)

//函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)
// 如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数示例:
function Person(name, age) {
    this.name = name;
    this.age = age
}

Person.prototype.say = function () {
    return "我的名字" + this.name + "-------我的年龄" + this.age;
}
var obj = new Person("tt", "55");  //通过构造函数创建对象,必须使用new 运算符
console.log(obj.say())
//1.当使用了构造函数,并且new 构造函数(),后台会隐式执行new Object()创建对象;
//2.将构造函数的作用域给新对象,(即new Object()创建出的对象),而函数体内的this就代表new Object()出来的对象;
//3.执行构造函数的代码;
//4.返回新对象(后台直接返回);


console.log('------------------------------Class(类)----------------------------------------')

// ES6引入了Class(类)这个概念,通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。如果将之前的代码改为ES6的写法就会是这个样子:
class Person2 {
    constructor(sex, love) {//constructor是一个构造方法,用来接收参数
        this.sex = sex;
        this.love = love;
    }

    say() {//这是一个类的方法,注意千万不要加上function
        return "我的性别:" + this.sex + "-------我的爱好:" + this.love;
    }
}

var obj2 = new Person2("男", "玩具");
console.log(obj2.say());

var obj3 = new Person2("dd", "cccc");
console.log(obj3.say());

// 注意项
// 1.在类中声明方法的时候,千万不要给该方法加上function关键字
// 2.方法之间不要用逗号分隔,否则会报错


console.log(typeof (Person))   //function
console.log(typeof Person2)   //function
console.log(Person === Person.prototype.constructor)  //true

// 以下代码说明构造函数的prototype属性,在ES6的类中依然存在着。
console.log(Person.prototype);//输出的结果是一个对象

// 实际上类的所有方法都定义在类的prototype属性上。代码证明下:
Person.prototype.say = function () {//定义与类中相同名字的方法。成功实现了覆盖!
    return "我是来覆盖的,你叫" + this.name + ",今年" + this.age + "岁了!";
}
var obj4 = new Person("laotie", 88);
console.log(obj4.say());
console.log("-----------------当然也可以通过prototype属性对类添加方法。如下:----------------------")
//
Person.prototype.addFn=function () {
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj5 = new Person("美滋滋", 999);
console.log(obj5.say()+obj5.addFn())
console.log(Person.prototype);
console.log("-----------------还可以通过Object.assign方法来为对象动态增加方法----------------------")
Object.assign(Person.prototype,{
    getName:function () {
        return this.name
    },
    getAge:function () {
        return this.age
    }
})
var obj6=new Person("乐呵呵",3)
console.log(obj6.getName())
console.log(obj6.getAge())

console.log("------constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法。----------")

class Box{
    constructor(){
        console.log("啦啦啦---构造函数---啦啦啦")
    }
}

// constructor方法如果没有显式定义,会隐式生成一个constructor方法。
// 所以即使你没有添加构造函数,构造函数也是存在的。constructor方法默认返回实例对象this,
// 但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例。

class Desk{
    constructor(){
        this.xixi="我是一只小鸟"
    }
}

class Box2{
    constructor(){
        return new Desk(); //这里没有用this 直接返回一个全新的对象
    }
}
var obj7=new Box2();
console.log(obj7.xixi)



// constructor中定义的属性可以称为实例属性(即定义在this对象上),
// constructor外声明的属性都是定义在原型上的,可以称为原型属性(即定义在class上)。
// hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值, true说明是实例属性,false说明不是实例属性。
// in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Number{
    constructor(num1,num2){
        this.num1=num1;
        this.num2=num2;
    }
    sum(){
        return this.num1+this.num2;
    }
}
var count=new Number(100,555);
console.log(count.sum())                    //655
console.log(count.hasOwnProperty("num1"));  //true
console.log(count.hasOwnProperty("num2"));  //true
console.log(count.hasOwnProperty("sum"));   //false
console.log("num1" in count);                //true
console.log("num2" in count);                //true
console.log("sum" in count);                 //true
console.log("say" in count);                 //false


console.log("---------类的所有实例共享一个原型对象,它们的原型都是Person.prototype,所以proto属性是相等的-------")
var count1=new Number(20,35);
var count2=new Number(10,45);
console.log(count1.__proto__===count2.__proto__);  //true

count1.__proto__.sub=function () {
    return this.num2-this.num1
}

console.log(count1.sub());   //15
console.log(count2.sub());   //35
console.log("------class不存在变量提升,所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后再定义。----------")
//ES5可以先使用再定义,存在变量提升
new A();
console.log(A)
function A(){

}


//ES6不能先使用再定义,不存在变量提升 会报错
new B();
console.log(B)   //B is not defined
class B{

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值