Bootstrap

js面向对象,es5和es6的区别,构造继承

class——类?

  • js是一个伪面向对象的语言,没有完整的面向对象的体系,至少es5及之前没有面向对象的体系,但是聪明的人自然有聪明的办法模拟其功能,到es6或以后,js的面向对象逐渐的展露头角。

不是对象的对象,我用函数也能构造对象:

js虽然开始没有对象,但是因为保留了new的功能,实际上也能做出面向对象的感觉来。

<script>
    function Person(name = "Lucy",age = "18") {
        this.name = name;
        this.age = age;
    }
    let person1 = new Person();
    let person2 = new Person('Bob','25');
    console.log(person1,person2);
</script>

在这里插入图片描述

因为es6箭头函数没有this一说,所以,箭头函数不能够拿来做构造函数!

如果我想给对象创建一些方法:

  • 将方法挂载在原型上:

<script>
    function Person(name = "Lucy",age = "18") {
        this.name = name;
        this.age = age;
    }
    
    Person.prototype.getName = function () {
        return this.name;
    }
    let person1 = new Person();
    let person2 = new Person('Bob','25');
    console.log(person1,person2);
    console.log(person1.getName());
    
</script>

在这里插入图片描述

那么肯定有人会疑问:为啥getName为啥不挂载在Person函数内部,用this.getName = function(){}挂载呢?

因为这个涉及到原型链这个知识,挂载在原型上可以不用创建更多的属性方法,同一个构造函数实例的对象公用一个原型,可以减少对象体积,实现方法复用,提高代码性能等。代码例子如下:

<script>
    function Person(name = "Lucy",age = "18") {
        this.name = name;
        this.age = age;
        this.getAge = function() {
            return this.age;
        }
    }
    Person.prototype.getName = function () {
        return this.name;
    }
    let person1 = new Person();
    let person2 = new Person('Bob','25');
    console.log(person1,person2);
    console.log(person1.getName()); //挂载在原型上
    console.log(person2.getAge()); //挂载在函数内部
</script>

在这里插入图片描述

es6——哇,妖兽啦!!!

class、extends关键字:

和java的面向对象很像,js的class也是直接定义类名,加大括号,拥有构造函数constructor,实例的时候参数直接传递到构造函数中。js的继承使用extends关键字。

一串代码带你走近es6 面向对象


<script>
    class Person{
        constructor(name,age){
            console.log("调用了Person类的构造函数");
            this.name = name;
            this.age = age;
        }
        getName(){
            console.log("我通过es6的面向对象使用了Person类的getName方法");
            console.log("Person 方法获取到了"+this+" 的属性name:" + this.name );  
        }
        getAge() {
            console.log("我通过es6的面向对象使用了Person类的getAge方法");
            console.log("Person 方法获取到了" + this + " 的属性age:" + this.age);
        }
    }
	//继承父类将拥有父类所有的构造属性和方法
    class StuBob extends Person{
        constructor(name, age,sex) {
            console.log("调用了子类stuBob的构造函数");
            super(name,age);//继承父类属性需要调用父类构造函数并传递参数构造基本属性
            this.sex = sex;//添加子类自己独有的属性
        }
        //添加子类自己独有的方法
        getSex(){
            console.log("调用了子类自己的方法getSex");
            console.log("获取到了子类的属性sex:" + this.sex);
            
        }
    }
    console.log("实例化person对象");
    let person = new Person('person1','25');
    person.getName();
    person.getAge();
    try {
        person.getSex()
    } catch (error) {
        console.log(error);
    }
    console.log("实例化了bob对象");
    let bob = new StuBob("bob","25","女")
    
    bob.getName();
    bob.getAge();
    bob.getSex();

    console.log(person, bob);
</script>

在这里插入图片描述

React里

  • 组件继承、引用组件

如果我们有一个文件专门用来存放自定义的组件模块,比如创建了一个component.jsx文件:

//将其暴露在window环境下
window.Mycomponent = class Mycomponent extends React.Component {
    render() {
        return (
            <div>
                <h1>hello word!</h1>
            </div>
        );
    }
}

在html中引用组件,使用组件,记得在使用组件之前里引入外部组件文件script:

ReactDOM.render(
    <Mycomponent/>,//如果要传递参数等就使用非自闭和成对标签就是
    document.getElementById('app')
);
;