对象、原型

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>

效果展示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

常见Java面试题 – 第四部分:迭代(iteration)和递归(recursion)

A. 可重入方法(re-entrant method)是可以安全进入的方法,即使同一个方法正在被执行,深入到同一个线程的调用栈里面也不会影响此次执行的安全性。一...

752
来自专栏守望轩

c#细节(三)-AS和IS

《c#的细节》是我当初学习c#时候,做的一些学习笔记的整理,现在回头看来这些都是非常浅显的知识,是c#非常细节的地方,同时也是不能忽略的地方,”细节决定成败“,...

1865
来自专栏日常分享

数组、List和ArrayList的区别

 有些知识点可能平时一直在使用,不过实际开发中我们可能只是知其然不知其所以然,所以经常的总结会对我们的提高和进步有很大的帮助,这里记录自己在工作之余的问题,持续...

912
来自专栏二进制文集

30分钟玩转「正则表达式」

推荐阅读:Jeffrey Friedl 《精通正则表达式(第3版)》,本文是该书的读书笔记。

672
来自专栏锦小年的博客

python学习笔记4.2-python高级之迭代器

迭代是Python中最强有力的特性之一,同时对编程人员来说,也是最难理解的一种用法。其实从高层次来看,迭代就是一种处理序列中元素的方式。通过自定义迭代对象可以...

20010
来自专栏大前端_Web

jsvascript—谜之this?

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1044
来自专栏Phoenix的Android之旅

Java面试基础之ArrayList操作

ArrayList应该是Java开发中经常见到的数据结构了。 曾经在一个面试中遇到这么个问题,

692
来自专栏编程

机器学习之Python基础(二)

标题 类 面向对象 装饰器 1 类 首先举一个创建类的例子 class是声明类的关键字,human是类名,括号里的object是继承的父类(在Python2中如...

17310
来自专栏Android开发指南

6:异常处理

2738
来自专栏进击的君君的前端之路

字符串与JSON

1383

扫码关注云+社区