js定义类的几种方式

JavaScript010

js定义类的几种方式,第1张

1,工厂方式:也可以带参数的!每次都要创建新函数showColor(),其实可以在工厂函数外定义该函数,每个对象共享了同一个函数,然后用o.showColor=showColor指向该方法2,构造函数方式function Car(sColor){this.color=sColorthis.showColor=function(){alert(this.color)}}var o1=new Car("red")3,原型方式4,混合的构造函数/原型方式function Car(sColor){this.color=sColorthis.drivers=new Array("mike","sue")}Car.prototype.showColor=function(){alert(this.color)}var o1=new Car("red")o1.drivers.push(“mat”)5,动态原型方法function Car(sColor){this.color=sColorthis.drivers=new Array("mike","sue")}if(typeof Car._initialized=="undefined"){Car.prototype.showColor=function(){alert(this.color)}Car._initialized=true}可以确保该方法只创建一次6,混合工厂模式建议不采用

javascript是一个“基于对象”的编程语言,不是面向对象的编程语言。

你要知道javascript中的function定义的函数实际上就是Function对象实例。

例如:

function demo(x){

alert(x)

}

实际上等价于:

Function demo = new Function("x","alert(x)")

所以你如果想要用javascript来模拟面向对象编程(例如Java的类),那么就可以用function来模拟Class,用function的原型prototype或者嵌套function来模拟类的方法或者属性。下面给你一个简单的例子:

//模拟学生类,可以带参数,例如initName

function Student(initName){

var name = initName//模拟学生类的属性name

}

Student.prototype.printName = function(){ //定义Student类prototype中的printName函数

alert(this.name)

}

测试时可以这样写:

var student = new Student("张三")//创建一个“Student对象”,实际上是一个Function实例对象

student.printName() //执行student对象的printName函数

<script>

        /* // 定义一个Person类型

        class Person{

            // 构造函数

            constructor ( name,age,gender ){

                this.name = name,

                this.age = age

                this.gender = gender

            }

            // 给类添加一个方法

            sayHi() {

                console.log(this.name,this.age,this.gender)

            }

            //用这种方式定义的方法,是将方法定义到类的原型对象中去

            sayHello() {

                console.log('hello!')

            }

        } */

        // 继承

        /* // ES5:

        // 定义一个人类

        function Person(name, age, gender) {

            this.name = name

            this.age = age

            this.gender = gender

        }

        Person.prototype.eat = function () {

            console.log(`我叫${this.name},我在吃饭...`)

        }

        Person.prototype.say = function () {

            console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)

        }

        // 通过Person类型,创建出了两个对象

        let p1 = new Person('刘德龙', 20, '男')

        p1.say()

        p1.eat()

        let p2 = new Person('高德政', 21, '男')

        p1.say()

        p1.eat()

        console.log('-------------------------------------')

        //定义了学生类

        function Student(name, age, gender, no) {

            // 继承Person类的属性

            Person.call(this, name, age, gender)

            // Student类特有的属性

            this.no = no

        }

        // 给Student类的prototype属性 new 一个Person类型的对象

        // 用于继承Person类的方法

        Student.prototype = new Person()

        Student.prototype.study = function () {

            console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)

        }

        let s1 = new Student('张三', 20, '女', '1001')

        s1.study()

        s1.eat()

        s1.say() */

        // ES6:

        // 定义人类

        class Person {

            // 定义构造函数

            constructor(name, age, gender) {

                this.name = name

                this.age = age

                this.gender = gender

            }

            // 说话方法

            say() {

                console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`)

            }

            // 吃方法

            eat() {

                console.log(`我叫${this.name},我在吃饭...`)

            }

        }

        // 每个类型都一个prototype属性,我们称它为类的原型对象。

        // 类的 原型对象中的成员 ,给类的 所有实例 (实例就是类创建出来的对象) 共享 。

        console.log(Person.prototype)

        // 通过Person类型,创建出了两个对象

        let p1 = new Person('刘德龙', 20, '男')

        console.log(p1)

        p1.say()

        p1.eat()

        let p2 = new Person('高德政', 21, '男')

        console.log(p2)

        p1.say()

        p1.eat()

        console.log('-------------------------------------')

        // extends关键字,表示继承

        class Student extends Person{

            // 构造函数

            constructor(name, age, gender,no){

                // 调用父类的构造函数

                super(name, age, gender)

                // 学生特有的属性

                this.no = no

            }

            //学生学习的方法

            study(){

                console.log(`我叫${this.name},我的学号是${this.no},我在学习...`)

            }

        }

        let s1 = new Student('张三', 20, '女', '1001')

        console.log(s1)

        s1.study()

        s1.eat()

        s1.say()

</script>