OOP and prototype

OOP 指什么?有哪些特性

  • Object-oriented programming的缩写,即面向对象程序设计,其中两个最重要的概念就是类和对象。类只是具备了某些功能和属性的抽象模型,类在实例化之后得到的实体就是对象。

  • 特性:

    1. 继承性:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
    2. 多态性:子类继承了来自父级类中的属性和方法,并对其中部分方法进行重写。
    3. 封装性:将一个类的使用和实现分开,只保留部分接口和方法与外部联系。

如何通过构造函数的方式创建一个拥有属性和方法的对象?

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.sayName = function (){
    console.log(this.name);
}


var p1 = new Person();  


new一个对象发生了什么

  1. 创建了一个空对象 作为this
  2. this.__proto__指向构造函数的prototype
  3. 运行构造函数
  4. 返回this(若构造函数没有return)

prototype 是什么?有什么特性

  • 我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含所有实例共享的属性和方法。
  • prototype就是通过调用构造函数而创建的那个对象实例的原型对象。通常我们可以将实例对象的公共属性和方法放在prototype对象中。好处是节省空间,当有很多对象时,不用每次有一个对象就去重复创建一份方法。

特性:

  1. 每个函数都有一个prototype属性,指向一个对象,叫做原型对象
  2. 所有对象都有__proto__
  3. 对象.__proto__=== 构造函数.prototype
  4. 访问一个对象的属性时,如果对象有这个属性,就获取到了,如果没有这个属性,则从__proto__里面去找,如果还是没有找到,则从原型对象prototype里的proto中去寻找。

画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');




创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

    function Car (name, color, status){
        this.name = name;
        this.color = color;
        this.status = status;
    }


    Car.prototype.run = function() {
        this.status = "running";
        console.log(this.status);
    }

    Car.prototype.stop = function() {
        this.status = "stop";
        console.log(this.status);
    }

    Car.prototype.getStatus = function() {
        console.log(this.status);
    }


    var p1 = new Car("宝马","black","run");
    p1.run();
    p1.stop();
    p1.getStatus();

创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法

  1. ct属性,GoTop 对应的 DOM 元素的容器
  2. target属性, GoTop 对应的 DOM 元素
  3. bindEvent 方法, 用于绑定事件
  4. createNode 方法, 用于在容器内创建节点

代码

使用木桶布局实现一个图片墙

效果图


代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容