javascript面向对象

木川松子

已于 2024-10-14 19:49:10 修改

阅读量555

点赞数 10

分类专栏： javascrip 文章标签： javascript 开发语言 ecmascript 前端

于 2024-10-14 18:25:18 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79273210/article/details/142923553

版权

javascrip 专栏收录该内容

1 篇文章

订阅专栏

官方文档:https://javascript.info/document

什么是对象？

对象其实是一个抽象概念的具体实例。任何整体都能看做对象，像猫，老鼠，狗。猫是一个对象，狗也是一个对象，猫和狗不是同一个对象。有了对象，相当于有了模板，將不同的事物进行分开，能减少代码量。它包括三个主要概念： 类与实例、继承、封装

类属性和方法

（1）类方法

实例化方法使用前类必须实例化，调用静态方法,直接用类名调用，不能实例化

/*  首字母都要大写 */
class Zhang {
        //构造方法, 相当于python的初始化方法，定义属性
        constructor(age){
            //属性age
            this.age= age;
        }
        //自定义方法getName,遵照驼峰命名法，实例化方法使用前必须实例化
        getAge(){
            return this.age;
        }
        //静态方法
        //函数名前加上static
        static yi(a1){
        // ``可以在里面写变量
            return `${a1},大笨蛋`;
        }
    }

// 初始化
a = new Zhang(21)
console.log(a.getAge())

// 调用静态方法,直接用类名调用，不能实例化
console.log(Zhang.yi('hhhhh,你输了'))

（2）继承，使用extend

class Zhang {
    //构造方法, 相当于python的初始化方法，定义属性
    constructor(age){
          //属性age
          this.age= age;
    }
    //自定义方法getName,遵照驼峰命名法
    getAge(){
          return this.age;
    }
}

// 使用extends 关键字
class Huang extends Zhang {
    constructor(name) {
        this.name = name;
   };
 }

（3）调用父类

/*  首字母都要大写 */
class Zhang {
    //构造方法, 相当于python的初始化方法，定义属性
    constructor(age) {
        //属性age
        this.age = age;
    }

    //自定义方法getName,遵照驼峰命名法
    getAge() {
        return this.age;
    }
}
class Huang extends Zhang {
    constructor(name) {
        super(22); // 继承Zhang的属性
        this.name = name;
    };
    //继承方法
    a () {
        return super.getAge()
    };
}
var aa = new Zhang(18);
var bb = new Huang('zhang');

console.log(bb.a());  // 18

构造函数

（1）继承

/*  1. 继承  */
        //父
        var Parent = function () {
            console.log('我是父亲')
        }

        var p = new Parent();
        Parent.prototype.add1 = function () {
            console.log('增加的第一个扩展')
        };
        Parent.prototype.add2 = function () {
            console.log('增加的第二个扩展')
        }


        //子
        var Child = function () {
            // 不用实例化调用父类的方法
            Parent.call(this)
        }
        var c = new Child();
        //继承父，不能通过类去继承，通过原型去继承
        for (var i in Parent.prototype) {
            Child.prototype[i] = Parent.prototype[i]
        }

        c.add1()
        c.add2 = function () {
            console.log('儿子，自己的')
        }
        // 如果子对象创建自己的函数，则会覆盖继承的
        c.add2()

（2）特性

可以得到函数内部的属性，在函数内部也能定义方法

//方式1，函数名首字母大写
function People(){
  // 使用this关键字，代表实例化属性
   this.name = 'zhang'
}

// 实例化对象
p = new People()
console.log(p.name)

//方式2，函数名不用大写
var people1 = function () {
   this.aa = 1
}

//实例化前要加new
var p1 = new people1();


// 打印aa属性
console.log(p1.aa)

prototype(原型)

（1）基本使用

注意:使用原型时,需使用函数原名,不能使用实例化后的名称

//方式2，函数名不用大写
var people1 = function () {
   this.aa = 1
}

// 对于函数,共享数据使用prototype,所有实例化函数都能得到此数据
p1.bb = '我是p1.aa'
p2 = new people1();

console.log(p2.bb) // 不能得到 undefined
//使用prototype, p1,p2能够得到bb,相当于扩展原函数
people1.prototype.bb = '我是p1.aa'

console.log(p2.bb) // 我是p1.aa
console.log(p1.bb)

（2）构建实例方法

people1.prototype.sayHello = function (name) {
    this.name = name
    console.log('Hello,'+ this.name)
}

// 不能使用函数名调用
// people1.sayHello()  报错
// 能使用实例化：var p2 = new people1();
p2.sayHello('zhang')

//2. 不使用prototype，就称为静态方法
people1.sayHello1 = function (name) {
    // 不能写name,不然会得到函数名
    this.name1 = name
    console.log('Hi,'+ this.name1)
}

//可以直接使用函数名调用
people1.sayHello1('yi')

constructor(构造)

用来得到实例对象前的原型, 比如写了一个AI大模型接口,对外提供的时实例化后的对象.用constructor可以得到对象原型,去扩展原对象

// 声明全局变量
var AI;
//自动执行函数，相当于封装
(
    function () {
        // 别人提供的ai大模型,内部
        var AI_func = function () {
            console.log('我是AI大模型')
        };
        // 对外提供的接口,这里不能用var，不能再次声明变量，不然会覆盖原变量
        AI = new AI_func()
    }
)();


// 3. 访问到原对象，并扩展。这里要是用prototype,因为只用实例化后的对象，不然调用函数时调用不了
AI.constructor.prototype.add_func = function() {
    console.log('我是AI大模型的add_func')
}
AI.add_func() // 我是AI大模型的add_func