天天看点
返回

对象、原型

1、 OOP 指什么？有哪些特性

OOP是Object-oriented programming的缩写，指面向对象程序设计。

在面向对象程序设计中有两个重要概念

  1. 类：

    类是对现实生活中一类具有共同特征的事物的抽象。

  2. 对象：

    对象是类的实例，对象包含属性和方法，属性是需要记忆的信息，方法是对象能够提供的服务。

特性

  1. 继承

    子类能继承父类的属性和方法

    子类能添加新的属性和方法，还能重写父类的属性和方法

  2. 封装

    隐藏对象的属性和实现细节，仅对外公开接口

  3. 多态

    指同一个实体同时具有多种形式，同一操作作用于不同对象，可以有不同的解释，产生不同的执行结果。

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

2.1 构造函数

面向对象编程的第一步，就是要生成对象。

对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。

典型的面向对象编程语言（比如 C++ 和 Java），存在“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成对象的函数。它提供模板，描述对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构。

构造函数的写法就是一个普通的函数，但是有自己的特征和用法。

var Vehicle = function () {
  this.price = 1000;
};

复制

上面代码中，Vehicle就是构造函数，它提供模板，用来生成实例对象。为了与普通函数区别，构造函数名字的第一个字母通常大写。

构造函数的特点有两个。

  1. 函数体内部使用了this关键字，代表了所要生成的对象实例。
  2. 生成对象的时候，必需用new命令，调用Vehicle函数。

2.2 new 命令的原理

new命令的作用，就是执行构造函数，返回一个实例对象。

new运算符创建对象实例：new后面跟一个函数 F ，根据需要函数可以传入参数，

new F(arguments...)

。

使用new运算符创建对象实例这一过程分为四步：

  1. 创建一个空对象，作为将要返回的对象实例
  2. 将这个空对象的原型，指向构造函数的prototype属性
  3. 将这个空对象赋值给函数内部的this关键字
  4. 开始执行构造函数内部的代码（为实例对象添加属性和方法）

也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子。

如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false

复制

上面代码中，构造函数Vehicle的return语句返回一个数值。这时，new命令就会忽略这个return语句，返回“构造”后的this对象。

但是，如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。这一点需要特别引起注意。

var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price
// 2000

复制

上面代码中，构造函数Vehicle的return语句，返回的是一个新对象。new命令会返回这个对象，而不是this对象。

另一方面，如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象。

function getMessage() {
  return 'this is a message';
}

var msg = new getMessage();

msg // {}
typeof msg // "object"

复制

上面代码中，getMessage是一个普通函数，返回一个字符串。对它使用new命令，会得到一个空对象。这是因为new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象。本例中，return语句返回的是字符串，所以new命令就忽略了该语句。

如果忘了使用new命令，直接调用构造函数会发生什么事？

这种情况下，构造函数就变成了普通函数，并不会生成实例对象this这时代表全局对象，将造成一些意想不到的结果。

var Vehicle = function (){
  this.price = 1000;
};

var v = Vehicle();
v.price
// Uncaught TypeError: Cannot read property 'price' of undefined

price
// 1000

复制

上面代码中，调用Vehicle构造函数时，忘了加上new命令。结果，price属性变成了全局变量，而变量v变成了undefined。

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

function People(name,color){
  this.name=name;
  this.color=color;
  this.sayname=function(){
    console.log(this.name);
  }
}
var person1=new People('xuguojun','red')

复制

3： prototype 是什么？有什么特性

我们创建的每个函数都有一个 prototype（原型）属性。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型中，如下面的例子所示。

function Person(){}

Person.prototype.name = "Stone";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    console.log(this.name);
};

var person1 = new Person();
person1.sayName();   // "Stone"

var person2 = new Person();
person2.sayName();   // "Stone"

console.log(person1.sayName == person2.sayName);  // true

复制

再来看一幅图：

对象、原型

image.png

通过图示我们可以看出一些端倪，实例可以通过prop访问到其类型的prototype属性，这就意味着类的prototype对象可以作为一个公共容器，供所有实例访问。

4：画出如下代码的原型图 

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('前端');

复制

对象、原型

Paste_Image.png

5. 创建一个 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(){
  console.log('running');
};
Car.prototype.stop = function(){
  console.log('stop');
};
Car.prototype.getStatus = function(){
  console.log(this.status);
};

var newCar = new Car('兰博基尼','black',0);
newCar.run();
newCar.stop();
newCar.getStatus();

复制

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

    1. ct

       属性，GoTop 对应的 DOM 元素的容器

    1. target

       属性， GoTop 对应的 DOM 元素

    1. bindEvent

       方法， 用于绑定事件
  • 4

    createNode

     方法， 用于在容器内创建节点 
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style id="jsbin-css">
    .goTop{
      border: 1px solid yellow;
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: yellow;
      cursor: pointer;
      position: fixed;
      bottom: 20px;
      right: 20px;
     }  
  </style>
</head>
<body>
   <div class="ct">
          <p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p>
   </div>
   <script>
      function GoTop($ele){
        this.ct=$ele;
        this.target=$('<div class="goTop">回到顶部</div>');
        this.init();
      };
      GoTop.prototype={
        init:function(){ 
        this.createNode();
        this.bindEvent();
      },
      createNode:function(){
        var me=this;
        me.target.hide();
        $('body').append(me.target);
        $(window).on('scroll',function(){
          if($(window).scrollTop()>300){
            me.target.show();
          }else{
            me.target.hide();
          }
        }); 
       },
      bindEvent:function(){
        var me=this;
        me.target.on('click',function(){
          $(window).scrollTop(0);
        })
      }
    }
    var go=new GoTop( $('body') );
  </script>
</body>
</html>

复制

效果展示

上一篇: JavaScript基础笔记
下一篇: jQuery 判断 checkbox 是否被选中的几种方法