对象 原型

2017-10-10  本文已影响24人  osborne

1- 关于 OOP 及其相关特性

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

//首先定义构造函数,包括公有的属性
function Person(attr{
    this.attr = attr;
}
//在构造函数的原型对象上定义公有的方法
Person.prototype.fn = function (){
    //code
} 
//使用new关键字创建实例
var p1 = new Person();
//new创建实例相当于以下3步
var p1 = {};
p1.__proto__ = Person.prototype;
Person.call(p1);

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

原型图:


.jpg

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('run');
}
Car.prototype.stop = function (){
    console.log('stop');
}
Car.prototype.getStatus = function (){
    console.log(this.status);
}

var audi = new Car('audi','white','stop');

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

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

预览
代码

上一篇 下一篇

猜你喜欢

热点阅读