JavaScript面向对象理解（构造函数+原型）

最新推荐文章于 2020-07-12 09:36:12 发布

gengdadada

最新推荐文章于 2020-07-12 09:36:12 发布

阅读量206

点赞数

分类专栏： JavaScript面向对象文章标签： javaScript面向对象

本文链接：https://blog.csdn.net/weixin_43943967/article/details/89381614

版权

JavaScript面向对象专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的面向对象思想，包括面向对象的特性：抽象、封装、继承和多态。接着，讨论了构造函数模式的优缺点，特别是其在实例化时每个方法会被重复创建的问题。文章还提出了JavaScript中函数的prototype对象用于存放共用属性和方法的约定，并说明了原型中的属性和方法如何被构造函数实例继承。最后，通过一个面向对象编程的示例进行了深入讲解。

摘要由CSDN通过智能技术生成

面向对象：面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体。

面向对象的特点：抽象(关注核心)，封装，继承(子类继承父类，不能影响父类)，多态(对象呈现多种状态)。

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例对象上重新创建一遍。

（构造函数）
function Person(name,age){
    	this.name=name;
    	this.age=age;
    	this.showinfo=function(){
    		alert(this.name+','+this.age);
    	}
    }
    var p1=new Person('zhangsan',100);
    var p2=new Person('zhangsan',100);

    console.log(p1.showinfo==p2.showinfo);

约定：
1.每一个函数都有一个对象属性(prototype：原型),里面放置的是共有的属性和方法。
2.prototype(对象属性)的所有属性和方法，都会被构造函数的实例继承—原型里面的this指向实例对象。

function Person(name, age) {
        this.name = name; //属性：属性都是不同的，私有的。
        this.age = age;
        /* this.showinfo = function() {//方法：公有的。
             alert(this.name + ',' + this.age);
         }*/
    }
    //我们可以把	那些不变(公用)的属性和方法，直接定义在prototype对象属性上。
    Person.prototype.num = 1000;
    Person.prototype.showinfo = function() { //方法：公有的。
        alert(this.name + ',' + this.age);
    }

    var p1 = new Person('zhangsan', 100);
    var p2 = new Person('zhangsan', 100);

    console.log(p1.showinfo == p2.showinfo); //true
    console.log(p1.num);
    console.log(p2.num);

面向对象编程demo

<script type="text/javascript">
    function Firework(x, y) {
        this.x = x; //水平的坐标
        this.y = y; //垂直的坐标
    }
    //1.创建烟花
    Firework.prototype.createbox = function() {
        this.firebox = document.createElement('div');
        this.firebox.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;
        document.body.appendChild(this.firebox);
        this.firemove(); //创建烟花，让烟花运动。
    };

    //2.firebox飞到鼠标的位置
    Firework.prototype.firemove = function() {
    	var _this=this;
        buffermove(this.firebox, { top: this.y }, function() {
            document.body.removeChild(_this.firebox);
            //消失后里面产生烟花碎片
            _this.createfragment();
        });
    };

    //3.随机创建烟花的碎片
    Firework.prototype.createfragment = function() {
        var num = this.rannum(30, 60);
        this.perRad = 2 * Math.PI / num; //每一个碎片占据的弧度
        for (var i = 0; i < num; i++) {
            var fragment = document.createElement('div');
            fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.rannum(0,255)},${this.rannum(0,255)},${this.rannum(0,255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
            document.body.appendChild(fragment);
            //一个一个运动
            this.boom(fragment, i); //当前创建的开始进行运动
        }
    };

    //4.烟花碎片运动。
    Firework.prototype.boom = function(obj, i) {
    	var _this=this;
        //初始位置
        var r = 10;
        obj.timer = setInterval(function() {
            r += 4;
            if (r >= 200) {
                clearInterval(obj.timer);
                document.body.removeChild(obj);
            }
            obj.style.left = _this.x + Math.sin(_this.perRad * i) * r + 'px';
            obj.style.top = _this.y + Math.cos(_this.perRad * i) * r + 'px';
        }, 30);

    }


    //随机数
    Firework.prototype.rannum = function(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    }

    document.onclick = function(ev) {
        var ev = ev || window.event;
        new Firework(ev.clientX, ev.clientY).createbox();
    }
    </script>