麦壳社区

面向对象

2016-11-21  本文已影响11人  张Boy

在谈面向对象之前我们先了解一下原型概念,我们在实际应用中,原型是类的基础


原型


function Button(){
      var color = '#00FF00';
      this.background = '#FF0000';
      var.setColor = function(c){
           color = c;
      } 
      this.run = function(){
          console.log('run');
      }
}
Botton.prototype.click = function(){
     console.log('click');
}
var btn = new Button();
console.log(btn.color) //undefined 私有变量
console.log(btn.background) //#FF0000 公共变量
btn.setColor('#0000FF'); //not a function  私有函数
btn.run() //run 公有方法 *与下面的protorype方法不同定义的不同,下面会看到
btn.click() //click 公有方法
//
console.log(btn.constructor == Button) //验证实例的构造函数原型
//
console.log(btn instanceof Button) //验证原型与实例关系
//
console.log(Button.prototype.isPrototypeOf(btn)) //验证原型和实例关系
//
console.log(btn.hasOwnProperty('background')) //判断属性是否是本地的或是继承来的

构造函数内变量和方法不共享,原型链上的函数共享

function iButton() {
      Button.call(this); //这里可以使用apply,作用一样,只是参数的格式不同
}
//全部继承Button的构造函数
iButton.prototype = Button.prototype; //继承Button的原型链。
var ibtn = new iButton();
console.log(ibtn.background);
console.log(ibtn.click);
function iButton() {
}
iButton.prototype = Button.prototype; //只继承Button的原型链。
iButton.prototype.constructor = iButton; //iButton的构造函数是自己本身
var ibtn = new iButton();
console.log(ibtn.background); //undefined
console.log(ibtn.click); //click
//
function iButton() {
    Button.call(this); //call只能继承Button的构造函数
}
var ibtn = new iButton();
console.log(ibtn.background); //#FF0000
console.log(ibtn.click); //not a function

上一篇下一篇

猜你喜欢

热点阅读