美文网首页
对象_原型

对象_原型

作者: 黄露hl | 来源:发表于2017-01-21 18:47 被阅读0次

1. OOP指什么?有什么特性?

Object Oriented Programming,OOP,面向对象程序设计,特征:
1) 封装
2) 继承
3) 多态
4)抽象
面向对象编程的目标是提高软件编程的灵活性和拓展性。

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

function People(name,age){
    this.name=name;
    this.age=age;
    this.sayHello=function(){
        console.log("Hello! My name is"+name);
    };
}
var p1=new People('小红',20);
var p2=new People('小明',22);

一个函数使用new表达式就是一个构造函数,在上面的例子中,我用构造函数People创建了两个实例:p1和p2。p1和p2都拥有name、age属性和sayHello这个方法。

 p1.name  // "小红"
 p2.age    // "22"
 p1.sayHello()  // "Hello! My name is小红"

3.prototype 是什么?有什么特性

  • 任意一个函数都有一个名称为prototype的属性,这是一个对象。
  • 每个对象都有一个内部属性__proto__(规范中没有指定这个名称,但是浏览器都这么实现的) 指向其类型的prototype属性,类的实例也是对象,其__proto__属性指向“类”的prototype。
图1 图2

在上面构造函数的例子中,People是一个函数,还是一个对象,我们称其为“类”,而p1是People这个“类”用new创建出来的,叫做“实例”,也是一个对象,p1的__proto__属性对应的就是People的prototype属性。如下图:

图3
那么我们在图2中直接var一个空对象 a__proto__属性对应的又是谁的prototype呢?我们不妨来试一试,在控制台中输入:
  a instanceof Object //-->true 

instanceof可以在继承关系中用来判断一个实例是否属于它的父类型。再输入:

 a.__proto__ === Object.prototype  //-->true

可以看出a对象是由Object直接创建,a__proto__属性指向的是Objectprototype属性。

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

类、实例、prototype、proto的关系:

  1. 我们通过函数定义了类People,类(函数)自动获得属性prototype。
  2. 每个类的实例都会有一个内部属性proto,指向类的prototype属性。
原型图.jpg
所以,当我们调用 p1.walk()的时候p1会先在自己的属性中查找,没有这个属性,然后在__proto__属性中查找,而p1__proto__指向的就是Peopleprototype,其中有walk。所以p1.walk()输出 '饥人谷 is walking'
‘类’的prototype就好像这个类所创建的实例的公共属性容器,这样当所有的实例都具有一个公共属性或方法时,我们就可以将这个属性或方法写进父类的prototype里。

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);
};
Car.jpg

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

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

相关文章

  • javascript中面向对象编程-创建对象之原型模式

    理解名词:对象 原型对象 原型属性 函数 构造函数 实例 对象: Object,创建对象,对象属性方法原型对象:...

  • JS重要概念之原型与原型链

    #Prototype原型对象 原型对象Function.prototype,具备以下特点:原型对象prototyp...

  • 📕 原型对象

    基本概念 原型 每一个对象都有它的原型对象,可以使用自己原型对象上的所有属性和方法 原型链 对象有原型,原型也是对...

  • 原型对象和对象原型以及原型链

    首先我们要知道,什么是原型对象,什么又是对象原型? 1.原型就是原型对象------prototype 作用就是...

  • 面向对象之原型对象和其他补充

    原型对象概念 原型对象的作用 如何访问构造函数的原型对象 ① 构造函数.protoType ② 对象.__prot...

  • JavaScript

    原型: 原型对象也是普通的对象,是对象一个自带隐式的 proto 属性,原型也有可能有自己的原型,如果一个原型对象...

  • Javascript-原型与原型链

    简单介绍 JavaScript 每个对象都拥有一个原型对象,对象以其原型为模板从原型中继承方法和属性; 原型对象也...

  • 对象初始化的不同方式

    不带原型的对象 带原型的对象

  • 原型链

    原型链函数的原型对象prototype函数都有prototype属性指向函数的原型对象【只有函数根除外】原型对象的...

  • 3.原型链、eval、Function等用法

    原型 原型本身是一个对象,这个对象的属性与方法可供其他对象。 谁有原型 默认所有的对象都有原型 谁有prototy...

网友评论

      本文标题:对象_原型

      本文链接:https://www.haomeiwen.com/subject/ahbwbttx.html