zoukankan      html  css  js  c++  java
  • js创建对象模式与继承方式小结

    创建js对象必须知道的4种方法#


    欢迎指正!

    1. 工厂模式

      简单说明:通过函数中创建新的对象,赋予属性后,再返回该对象。该方法一般不适用

       function sayName() {
       	console.log(this.name);
       }
      
       function Person1 (name, age) {
       	var obj = new Object();
       	obj.name = name;
       	obj.age = age;
       	obj.sayName = sayName;
      
       	return obj;
       }
      
       var person1 = Person1('susan', 21);
       person1.sayName();	
      
    2. 构造函数模式

      简单说明:无需在函数中创建对象而使用this指代,且无需返回

       function Person2 (name, age) {
       		this.name = name;
       		this.age = age;
       		this.sayName = sayName;
       	}
      
       var person2 = new Person2('susan', 21);
       person2.sayName();
      
    3. 原型模式

      在函数中不对属性进行定义,而是使用prototype属性进行定义

       function Person3 () {}
      
       Person3.prototype.name = 'susan';
       Person3.prototype.age = 21;
       Person3.prototype.sayName = sayName;
      
       var person3 = new Person3();
       person3.sayName();
      
    4. 混合构造函数模式与原型模式(推荐)

      该方法集合了两种模式的优点,既可以做到对象拥有私有属性,又可以公用其中的一些方法

       function Person4 (name, age) {
       	this.name = name;
       	this.age = age;
       }
      
       Person4.prototype.sayName = sayName;
      
       var person4 = new Person4('susan', 21);
       person4.sayName();
      

    js继承必须知道的4种方法


    1. 原型链继承。

      简单说明:子类的原型对象为基类的实例函数

       (function () {
       	function SuperType() {
       		this.property = true;
       		this.exist = 'yes';
       	}
      
       	SuperType.prototype.getSuperValue = function () {
       		return this.property;
       	}
      
       	function SubType() {
       		this.subproperty = false;
       	}
      
       	//继承SuperType
       	SubType.prototype = new SuperType();
       	//避免使用字面量方法设置
       	SuperType.prototype.getSubValue = function () {
       		return this.subproperty;
       	}
      
       	var instance = new SubType();
       	console.log(instance.getSuperValue());  //true
       }());
      
    2. 构造函数继承

      在子类中使用call/apply调用父类

       (function () {
       	function SuperType() {
       		this.colors = ['red', 'blue', 'pink'];
       	}
      
       	function SubType() {
       		SuperType.call(this);
       	}
      
       	var instance1 = new SubType();
       	instance1.colors.push('black');
       	console.log(instance1.colors); //["red", "blue", "pink", "black"]
      
       	var instance2 = new SubType();
       	console.log(instance2.colors);	//["red", "blue", "pink"]
       }());
      
    3. 原型式继承

      使用Object.create(),返回的新对象以括号内的对象为原型,其中可以对私有属性进行更改,而方法也得到了公用。不足点在于当数据为数组时,会共享这个数组。

       var sub = Object.create(person);
       sub.name = 'jack';
       sub.colors.push('white');
       console.log(sub.name);	//jack	
       var subs = Object.create(person);
       subs.name = 'jan';
       subs.colors.push('pink');
       console.log(subs.name);	//jan
       console.log(subs.colors); //["red", "black", "white", "pink"]
      
    4. 拷贝继承

      拷贝一个对象的所有属性和方法,缺点是无法获取基类不能枚举的属性

       function Animal () {
       	this.name = 'susan';
       	this.age = 21;
       	this.sayName = function () {
       		console.log(this.name);
       	}
       }
      
       Animal.prototype.sayAge = function () {
       	console.log(this.age);
       }
      
       function Cat () {
       	var animal = new Animal();
      
       	for (var p in animal) {
       		Cat.prototype[p] = animal[p];
       	}
       }
      
       Cat.prototype.sayHi = function () {
       	console.log('hi');
       }
      
       var cat = new Cat();
       cat.sayAge();	//21
       cat.sayName();	//susan
       cat.sayHi();	//hi
  • 相关阅读:
    Android----paint触摸轨迹监听
    Android----ListView入门知识--各种Adapter配合使用
    Android------自定义ListView详解
    Android----drawable state各个属性详解----ListView几个比较特别的属性:
    Android------三种监听OnTouchListener、OnLongClickListener同时实现即其中返回值true或者false的含义
    Android----基于多触控的图片缩放和拖动代码实现
    Android-----View绘制流程以及invalidate()等相关方法分析 .
    android-------手写签名系统的设计与实现之实现画笔设置
    安卓APP动态调试-IDA实用攻略
    win10怎么关闭把管理员权限
  • 原文地址:https://www.cnblogs.com/susantong/p/6556227.html
Copyright © 2011-2022 走看看