//函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数) // 如果要生成一个对象实例,需要先定义一个构造函数,然后通过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{ }
ES6-Class(类)
最新推荐文章于 2024-04-09 10:36:01 发布