首页 > 软件开发 > JavaScript >

js之面向对象编程

来源:互联网 2023-03-16 23:57:33 版权归原作者所有,如有侵权,请联系我们

现在都很多编程语言都是面向对象的。而对于javascript这样一门用于网站开发的前端脚本也是可以面向对象的。但即使它的所有数据都可以看成对象,但并不就算是面向对象编程了。gtY办公区 - 实用经验教程分享!

今天我们就来看看什么是javascript中的面向对象编程。gtY办公区 - 实用经验教程分享!

方法/步骤

  • 1

    JS对象与其它对象的区别:gtY办公区 - 实用经验教程分享!

    像JAVA与C 语言中的对象,是先构造一个类,再通过类实例化对一个对象gtY办公区 - 实用经验教程分享!

    而javascript却不一样:gtY办公区 - 实用经验教程分享!

    JavaScript中不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。gtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 2

    什么是JS中的原型(prototype):gtY办公区 - 实用经验教程分享!

    首先来与电影类比一下:有一个人的生活很精彩,所以可以把他的一生搬上大荧幕,我们就叫以这个人为原型,制作成的电影。gtY办公区 - 实用经验教程分享!

    由于JS没有【类】这个概念,所以我们要得到一个对象时,可以找一个类似的对象为原型,通过属性的修改来得到新的对象。代码示例如下:gtY办公区 - 实用经验教程分享!

    假设想生成一个名叫【小明】的对象,但我之前有一个叫【小红】的对象,我就可以以【小红】对象为原型,来生成【小明】。gtY办公区 - 实用经验教程分享!

    // 定义小红gtY办公区 - 实用经验教程分享!

    var xh =gtY办公区 - 实用经验教程分享!

    {gtY办公区 - 实用经验教程分享!

    name: 'xiaohong',gtY办公区 - 实用经验教程分享!

    height: 1.2,gtY办公区 - 实用经验教程分享!

    run: function () {gtY办公区 - 实用经验教程分享!

    console.log(this.name ' is running...'); gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    };gtY办公区 - 实用经验教程分享!

    // 定义小明gtY办公区 - 实用经验教程分享!

    var xm = {gtY办公区 - 实用经验教程分享!

    name: '小明'gtY办公区 - 实用经验教程分享!

    };gtY办公区 - 实用经验教程分享!

    // 把小明的原型设定为小红,这时除了在小明对象中重新定义过的name属性gtY办公区 - 实用经验教程分享!

    // 其它属于和方法都会继承小红的内容。gtY办公区 - 实用经验教程分享!

    xm.__proto__ = xh ;gtY办公区 - 实用经验教程分享!

    gtY办公区 - 实用经验教程分享!

    // 如果有一天【小明】想飞了,那可以把他的原型设定不一只鸟:gtY办公区 - 实用经验教程分享!

    var Bird =gtY办公区 - 实用经验教程分享!

    {gtY办公区 - 实用经验教程分享!

    fly: function () {gtY办公区 - 实用经验教程分享!

    console.log(this.name ' is flying...');gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    };gtY办公区 - 实用经验教程分享!

    xiaoming.__proto__ = Bird;gtY办公区 - 实用经验教程分享!

    gtY办公区 - 实用经验教程分享!

    注意:JavaScript没有“Class”的概念,它是用原型这个概念来实现面向对象的封装,继承和多态的。gtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 3

    用create()方法创建对象:gtY办公区 - 实用经验教程分享!

    不要直接用obj.__proto__去改变一个对象的原型,不符合面向对象的思想,有些浏览器也不支持。用create()方法的代码示例如下:gtY办公区 - 实用经验教程分享!

    // 原型对象gtY办公区 - 实用经验教程分享!

    var Student = {gtY办公区 - 实用经验教程分享!

    name: 'nobody',gtY办公区 - 实用经验教程分享!

    height: 1.6,gtY办公区 - 实用经验教程分享!

    run: function () {gtY办公区 - 实用经验教程分享!

    console.log(this.name ' is running...');gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    };gtY办公区 - 实用经验教程分享!

    function createStudent(name) {gtY办公区 - 实用经验教程分享!

    // 以Student为原型创建一个新对象:gtY办公区 - 实用经验教程分享!

    var stu = Object.create(Student);gtY办公区 - 实用经验教程分享!

    // 初始化新对象:gtY办公区 - 实用经验教程分享!

    stu.name = name;gtY办公区 - 实用经验教程分享!

    return stu;gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    // 创建名叫小明的对象gtY办公区 - 实用经验教程分享!

    var xiaoming = createStudent('小明');gtY办公区 - 实用经验教程分享!

    xiaoming.run();gtY办公区 - 实用经验教程分享!

    // xiaoming.__proto__ === Student;xiaoming对象的原型就是Student。gtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 3此文章非法爬取自百度经验
  • 4

    原型链说明:gtY办公区 - 实用经验教程分享!

    原型是可以不断系继承的,如上例中小明的原型是学生,那学生的原型还可以是人,如下:gtY办公区 - 实用经验教程分享!

    xiaoming.__proto__ === StudentgtY办公区 - 实用经验教程分享!

    Student.__proto__=== PersongtY办公区 - 实用经验教程分享!

    在查找一个属性时,如果当前对象有,就直接返回,如当前对象没有,就在上一级原型中去查找。到最终一级原型上都没找到的话,就只能返回undefined了。gtY办公区 - 实用经验教程分享!

    gtY办公区 - 实用经验教程分享!

    如数据的原型链如下:gtY办公区 - 实用经验教程分享!

    var arr = [1, 2];gtY办公区 - 实用经验教程分享!

    其原型链是:gtY办公区 - 实用经验教程分享!

    arr ----> Array.prototype ----> Object.prototype ----> nullgtY办公区 - 实用经验教程分享!

    函数的原型链是:gtY办公区 - 实用经验教程分享!

    function foo() { return 0; }gtY办公区 - 实用经验教程分享!

    foo ----> Function.prototype ----> Object.prototype ----> nullgtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 5

    JS中的构造函数:gtY办公区 - 实用经验教程分享!

    以下是一个普通函数,它返回undefined:gtY办公区 - 实用经验教程分享!

    function Student(name) {gtY办公区 - 实用经验教程分享!

    this.name = name;gtY办公区 - 实用经验教程分享!

    this.hello = function () {gtY办公区 - 实用经验教程分享!

    alert('Hello, ' this.name '!');gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    }gtY办公区 - 实用经验教程分享!

    // 如果以new关键字来调用,Student就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;gtY办公区 - 实用经验教程分享!

    var xiaoming = new Student('小明');gtY办公区 - 实用经验教程分享!

    gtY办公区 - 实用经验教程分享!

    新创建的xiaoming的原型链是:gtY办公区 - 实用经验教程分享!

    xiaoming ----> Student.prototype ----> Object.prototype ----> nullgtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 6

    内存浪费的问题:gtY办公区 - 实用经验教程分享!

    以上function Student(name) 函数为例:gtY办公区 - 实用经验教程分享!

    var s1 = new Student('小明');gtY办公区 - 实用经验教程分享!

    var s2 = new Student('小红');gtY办公区 - 实用经验教程分享!

    var s3 = new Student('小天');gtY办公区 - 实用经验教程分享!

    其中s1,s2,s3都包含不同的name与hello属性。有不同name是合理的,因为大家的名字都不相同。但不同的hello却不合理了,因为s1,s2,s3中hello的代码与功能都是相同的,所以只应该存在一份就行了。这时就需要把hello从Student中移动到Student的原型中。原因如下:gtY办公区 - 实用经验教程分享!

    当s1,s2,s3不存在在hello属性时,就会自动去搜索它所在的原型是否提供了该属性。这样一来就只需要一个hello代码就行了,内存也就不会造成浪费了。gtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 7

    不要忘记写new:gtY办公区 - 实用经验教程分享!

    如果生成对象时忘记写new了,如下:gtY办公区 - 实用经验教程分享!

    var xiaoming = Student('小明');gtY办公区 - 实用经验教程分享!

    在strict模式下,this.name = name将报错,因为this绑定为undefined。gtY办公区 - 实用经验教程分享!

    在非strict模式下,this.name = name不报错,因为this绑定为window,于是无意间创建了全局变量name,并且返回undefined。gtY办公区 - 实用经验教程分享!

    所以生成对象时千万不要忘记了写new。gtY办公区 - 实用经验教程分享!

    js之面向对象编程gtY办公区 - 实用经验教程分享!

  • 注意事项

    • 如果喜欢请投票加收藏哦。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!gtY办公区 - 实用经验教程分享!


    标签: 编程JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号