博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript面相对象编程,封装与继承
阅读量:5216 次
发布时间:2019-06-14

本文共 5637 字,大约阅读时间需要 18 分钟。

一、封装

  var line = '<div>----------------------------------------------</div>';

 //1.对象的原始模式
  var obj = {name : '', color : ''}
 生成两个实例对象

  var hengda = {}; // 创建一个空对象

  hengda.name = "恒达"; // 按照原型对象的属性赋值
  hengda.color = "蓝色";

  var daolan = {};

  daolan.name = "导览";
  daolan.color = "绿色";

  console.log(hengda);

  console.log(daolan);

  document.write(JSON.stringify(hengda));

  document.write(JSON.stringify(hengda));

  document.write(line);

// 这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。
// 2.原始模式的改进,写一个函数,解决代码重复的问题

  function newObj(name,color) {

    return {
      name:name,
      color:color
    }
  }
// 然后生成实例对象,就等于是在调用函数:
  var hengda = newObj("恒达","蓝色");

  var daolan = newObj("导览","绿色");

  document.write(JSON.stringify(hengda));

  document.write(JSON.stringify(hengda));

// 这种方法的问题依然是,hengda和daolan之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

  document.write(line);

// 2. 构造函数模式,为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

// 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
  function hengdaObj(name,color){
    this.name=name;
    this.color=color;
  }
// 生成实例对象
  var hengda = new hengdaObj("恒达","蓝色");
  var daolan = new hengdaObj("导览","绿色");
  document.write(JSON.stringify(hengda));
  document.write(JSON.stringify(daolan));

// 这时hengda和daolan会自动含有一个constructor属性,指向它们的构造函数。

  document.write('<br> hengda--constructor:' + (hengda.constructor == hengdaObj)); //true
  document.write(', daolan--constructor:' + (daolan.constructor == hengdaObj)); //true

// Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系

  document.write('<br> hengda--instanceof :' + (hengda instanceof hengdaObj)); //true
  document.write(', daolan--instanceof :' + (daolan instanceof hengdaObj)); //true

  document.write(line);

// 4.构造函数模式的问题,构造函数方法很好用,但是存在一个浪费内存的问题

// 改造,为hengdaObj对象添加一个不变的属性position,再添加一个方法make。那么,原型对象hengdaObj就变成了下面这样:
  function hengdaObj(name,color){
    this.name = name;
    this.color = color;
    this.position = "天津";
    this.make = function(){
    console.log("挣钱");
    };
  }
// 生成实例对象
  var hengda = new hengdaObj("恒达","蓝色");
  var daolan = new hengdaObj("导览","绿色");
  document.write(JSON.stringify(hengda));
  document.write(JSON.stringify(daolan));
  document.write('<br>hengda.position:');
  document.write(hengda.position);
  hengda.make();

// position属性和make()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率

// 让position属性和make()方法在内存中只生成一次,然后所有实例都指向那个内存地址,这意味着,把那些不变的属性和方法,直接定义在prototype对象上。

  function hengdaObj(name,color){
    this.name=name;
    this.color=color;
  }
  hengdaObj.prototype.position = "天津";
  hengdaObj.prototype.make = function(){console.log("挣钱");};
// 生成实例对象
  var hengda = new hengdaObj("恒达","蓝色");
  var daolan = new hengdaObj("导览","绿色");
  document.write(JSON.stringify(hengda));
  document.write(JSON.stringify(daolan));
  document.write('<br>hengda.position:');
  document.write(hengda.position);
  hengda.make();
// 这时所有实例的position属性和make()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率
// prototype对象验证方法
// isPrototypeOf()

  document.write('<br>hengda isPrototypeOf hengdaObj: ' + hengdaObj.prototype.isPrototypeOf(hengda))

// 每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
  document.write('<br>hasOwnProperty name:' + hengda.hasOwnProperty("name")); // true
  document.write('<br>hasOwnProperty position:' + hengda.hasOwnProperty("poisition")); // false

// in运算符,来判断某个实例是否含有某个属性,不管是不是本地属性。

  document.write('<br>name in hengda:' + ('name' in hengda)); // true
  document.write('<br>poisition in hengda:' + ('position' in hengda)); // false

 

二、继承

  var line = '<div>----------------------------------------------</div>';

// 现在有一个"水果"对象的构造函数。
  function fruit(){
    this.type = "水果";
  }
// 还有一个"苹果"对象的构造函数。
  function apple(name,color){
    this.name = name;
    this.color = color;
  }
// 怎样才能使"苹果"继承"水果"呢?
// 1.构造函数绑定,最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行
  function fruit(){
    this.type = "水果";
  }
  function apple(name,color){
  fruit.apply(this, arguments);
    this.name = name;
    this.color = color;
  }

  var apple1 = new apple("富士","红色");

  document.write(JSON.stringify(apple1.type));
  document.write(line);

// 2.prototype模式,更常见,使用prototype属性。如果"苹果"的prototype对象,指向一个水果的实例,那么所有"水果"的实例,就能继承水果了。

  function fruit(){
    this.type = "水果";
  }
  function apple(name,color){
    this.name = name;
    this.color = color;
  }

  apple.prototype = new fruit();

  apple.prototype.constructor = apple;
  var apple2 = new apple("黄元帅","黄色");
  document.write(apple2.type);
// 任何一个prototype对象都有一个constructor属性,指向它的构造函数。加了"apple.prototype.constructor = apple;"apple.prototype.constructor是指向apple的;不加加了这一行以后,apple.prototype 是fruit
  document.write('<br>apple constructor:' + (apple.prototype.constructor == fruit)); //true
// 更重要的是,每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。
  document.write('<br>apple2 等于 apple constructor : ' + (apple2.constructor == apple.prototype.constructor));
  document.write(line);

// 3. 拷贝继承,把父对象的所有属性和方法,拷贝进子对象

// 首先,还是把fruit的所有不变属性,都放到它的prototype对象上。

  function fruit(){}

  fruit.prototype.type = "水果";

  function apple(name,color){
    this.name = name;
    this.color = color;
  }
// 然后,再写一个函数,实现属性拷贝的目的。

  function extend(Child, Parent) {

    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
      }
    c.uber = p;
  }

// 这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。

  extend(apple, fruit);

  var apple3 = new apple("圣诞果","大红色");

  document.write(JSON.stringify(apple3));
  document.write('<br>拷贝继承:' + apple3.type);

转载于:https://www.cnblogs.com/hengda-frontend/p/8256908.html

你可能感兴趣的文章
Count Numbers
查看>>
编写高质量代码改善C#程序的157个建议——建议110:用类来代替enum
查看>>
网卡bond技术
查看>>
UITabbarController的UITabbarItem(例:"我的")点击时,判断是否登录
查看>>
UNIX基础知识之输入和输出
查看>>
【洛谷 P1666】 前缀单词 (Trie)
查看>>
对称加密和非对称加密
查看>>
数据库锁机制及乐观锁,悲观锁的并发控制
查看>>
图像处理中双线性插值
查看>>
RobHess的SIFT代码解析之RANSAC
查看>>
03 线程池
查看>>
201771010125王瑜《面向对象程序设计(Java)》第十三周学习总结
查看>>
java中内部类的讲解
查看>>
手机验证码执行流程
查看>>
python 基础 ----- 变量
查看>>
设计模式课程 设计模式精讲 2-2 UML类图讲解
查看>>
Silverlight 的菜单控件。(不是 Toolkit的)
查看>>
:hover 鼠标同时触发两个元素变化
查看>>
go语言学习十三 - 相等性
查看>>
Idea 提交代码到码云(提交到github也大同小异)
查看>>