美文网首页
面向对象(一)

面向对象(一)

作者: 东阳啊 | 来源:发表于2017-12-04 16:29 被阅读0次

面向对象(00)
面向对象中的对象,就是将构造函数,把相同的功能进行整合,方便复用。

对象属性,是对象内部才用的特征,这种属性有两种。

1、对象属性
数据属性:

Object.defineProperty(person, "name", {
   configurable : true , //delete删除属性,默认是true
   enumerable : false, //for-in 循环返回属性,默认是true 
   writable : false, //是否可以修改值
   value : "li",//值
})
console.log(person.name);
person.name = "dong";
console.log(person);

访问器属性:

 var person = {
    _year : 0
 }
  Object.defineProperty(person, "year", {
   configurable : true ,
   enumerable : false,
   get : function(){
     return this._year - 2;
   },

   set : function(newValue){
      this._year = newValue + 1000;
    }
 })
person.year = 10;
console.log(person.year);

2、创建对象
所谓的创建对象就是把相同归类相同的功能和属性。具体怎么去实现呢?
(1)工厂模式


屏幕快照 2017-12-06 上午12.32.25.png

(2)构造函数


屏幕快照 2017-12-06 上午12.33.11.png
屏幕快照 2018-04-19 下午12.53.33.png

(3)原型模式

屏幕快照 2017-12-06 上午12.34.05.png 屏幕快照 2017-12-06 上午12.34.48.png

(4)组合模式

屏幕快照 2017-12-06 上午12.37.22.png

3、继承

(1)原型链继承

是把父类的属性和方法实例化后,赋给子类的原型上。这样在子类的原型上,就存在父类的属性和方法。

这样的缺点就是,一旦其中一个子类的原型上属性和方法被改变。那么其他的子类上的属性和方法也都将会被改变。

//属性  
 function SuperType(){
    this.colors = ["red","blue","green"]
 }
 //方法
 SuperType.prototype.getSuperValue = function(){
    return this.prototype
 }
 function SubType(){

 }
 SubType.prototype = new SuperType();

 //添加子类方法

 SubType.prototype.getSubValue = function(){
       return this.subprototype;
 }

 //重写超累方法

 SubType.prototype.getSuperValue = function(){
    return false;
 }

  var instance1 = new SubType();

  instance1.colors.push('black');

  var instance2 = new SubType();

  console.log(instance2.colors)
//此时打印出来的是  
Array(4)
0:"red"
1:"blue"
2:"green"
3:"black"

(2)借用构造函数的方法去实现继承

在子类中构造构造函数去调用父类的构造函数,然后将父类的属性和方法挂载到子类上。注意,原型链上的属性和方法不能被继承。

所以这种方式的缺陷是,方法写在构造函数上,每一次执行都被拷贝一份,造成资源的浪费。

 //属性  
 function SuperType(){
    this.colors = ["red","blue","green"]
 }
 
//子类用构造函数去执行父类,将对象和方法挂载到
 function SubType(){
     SuperType.call(this)
 }
  var instance1 = new SubType();
  instance1.colors.push('black');
  var instance2 = new SubType();
  console.log(instance2.colors)

(3)组合继承
把属性通过借用构造函数的方式去进行继承,把方法通过原型链的方式去进行继承
其中在用原型链继承方法的时候定义一个空的构造函数去清空父类的属性,避免在原型中在继承一次,造成冗余。

 //父类属性  
 function SuperType(name){
    this.colors = ["red","blue","green"],
    this.name = name
 }

 //父类方法
 SuperType.prototype.SayName = function(){
    console.log("name")
}
 
 //子类通过借用构造函数去继承属性
  function SubType(name,age){
     SuperType.call(this,name);
     this.age = age;  //定义子类里面自由的属性
  }
 //子类通过原型链去继承方法
  // SubType.prototype = new SuperType();
  //如果直接这么继承会在原型链中继承属性,造成冗余。
  function F(){ } //声明一个空方法,相当于清空了父类的属性。
  F.prototype = SuperType.prototype;
  SubType.prototype = new F();
  SubType.prototype.constructor = SubType;

function F(){ } //声明一个空方法,相当于清空了父类的属性。
F.prototype = SuperType.prototype;
SubType.prototype = new F();

可以用Object.create(SuperType.prototype)去代替
Object.create() 接受一个参数proto,将新对象的proto指向传进来的。

//(5) ES6继承
     
  class  fn3{
      constructor(age){
         this.age = age;
      }
      say(){
         console.log(this.name)
      }
  }

 class SubFn extends fn3{
      constructor(name,age){
          super(age)
          this.name = name;
      }
      eat(){
        console.log(this.name)
      }
 }

  var  obj =  new SubFn('li',[23,23]);

  console.log(SubFn.prototype)
  console.log(obj)

原型和原型链之间的关系:

定义对象的三种方式:

var o ={ }; //是 new object()的简写
var o1 = new Base();
var o2 = Object.create(Base);

new开始去理解,
当用new去实例一个对象的时候,其实发生了这么几个事情。比如 // new Base();
(1)首先生成一个空对象,可以理解为 var obj = {};
(2)对象的上的原型属性(proto)指向构造函数的原型属性(prototype)
(3) 使用obj去调用 // Base.call(obj);
(4) 如果构造函数没有返回值或者返回值不是对象的话,那个这个对象就是obj,是对象的话,则会被覆盖。
所以在原型链继承上,因为一个对象实例的proto指向其构造函数的prototype,所以把实例付给新的构造函数的prototype。这样新的构造函数在原型属性上就继承了之前的方法和属性。

屏幕快照 2017-12-06 上午12.18.02.png

Object.create(prototype, descriptors)

Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
};

这种写法的好处是指定了构造函数prototype的指向,不会真的去执行构造函数。

屏幕快照 2017-12-06 上午12.50.34.png
console.log(obj1 instanceof Abc)
console.log(obj1 instanceof BBC)
console.log(obj1 instanceof Object)

可能都是true

hasOwnProperty

obj.hasOwnProperty("name") // 判断属性是否是自己实例属性,是为true

in

isPrototypeOf()

function base(argument) {
 this.name = "li"
  }
var a = new base();
console.log(base.prototype.isPrototypeOf(a))//base.prototype函
  数在a的原型链上
 function base2(){ 
 }
base2.prototype = new base();
 var a2 = new base2();

console.log(base2.prototype.isPrototypeOf(a2))//base2.prototype函数在a的原型链上
console.log(base.prototype.isPrototypeOf(a2))//base.prototype函数在a的原型链上
console.log(Object.prototype.isPrototypeOf(a2))//base.prototype函数在a的原型链上

相关文章

  • 面向对象(未完成)

    面向对象 标签(空格分隔): 面向对象 第一章:面向对象(上) 什么叫面向对象 面向过程、面向对象、两者区别 构造...

  • 面向对象的三大基本特征和五大设计原则

    1、面向对象概念 1.1、理解面向对象 面向对象是相对面向过程而言; 面向对象和面向过程都是一种思想; 面向过程:...

  • Java学习day-07:面向对象

    一、面向过程和面向对象 1.面向对象与面向过程的区别: 面向对象具有三大特征;封装,继承,多态;面向对象与面向过程...

  • 面向对象基础

    一、面向对象概述 1、面向对象编程包括: OOA:面向对象分析OOD:面向对象的设计OOP:面向对象的编程实现 2...

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • 面向对象:JavaScript

    面向对象 面向对象组成 this指向 第一个面向对象 第一个面向对象加强版 第一个面向对象(this) 原型 原型...

  • 面向对象

    面向对象思想面向对象基本概述面向对象是基于面向过程的编程思想。面向对象:强调的是每一个功能的步骤面向对象:强调的是...

  • 总结.Net基础知识——献给即将入坑的同行们(一期)

    什么是面向对象 面向对象OO = 面向对象的分析OOA + 面向对象的设计OOD + 面向对象的编程OOP; 通俗...

  • 面向对象基础

    面向对象编程包括: 面向对象的分析(OOA) 面向对象的设计(OOD) 面向对象的编程实现(OOP) 面向对象思想...

网友评论

      本文标题:面向对象(一)

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