码迷,mamicode.com
首页 > Web开发 > 详细

js之构造函数、原型模式

时间:2019-01-05 13:28:06      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:基本数据类型   工厂   box   包括   修改   实参   构造   属性的方法   apply   

目录

单例模式

把描述同一事物的属性放进同一个空间地址下,避免了全局变量的干扰,这种开发的模式就是单例模式。

var singleton1={
   fn:function{
   }
}
var singleton2={
   fn:function{
   }
}
singleton1.fn();
singleton2.fn();

高级单例模式

采用了自执行函数闭包的作用,保护里面的私有变量不受外界的干扰;同时,如果在闭包外面使用里面的函数时,可以把其return作为返回值。

  var niu = (function () {
       var  num = 1;
       var  niuCode = {
           fn:function () {
               console.log(num);
           },
           sum:function () {
               console.log(num);
           }
       }
       return niuCode;//niuCode只是一个空间地址,所以定义一个niu来接收它。
   })();
    box.onclick = niu.fn;

工厂模式

把实现同一功能的代码放到一个函数中,当想实现这个功能时,执行这个函数即可;减少了代码的冗余,“高内聚,低耦合”,实现了函数的封装。

  function createPerson(name,age) {
        var obj ={};// 创建一个对象
        obj.name = name;// name获取形参的值
        obj.age = age;
        return obj;//return 出一个对象
    }
    // p1接收了createPerson 的返回值;
    var p1 = createPerson("张三",12);
    var p2 = createPerson("王五",30);

构造函数

new:操作符,在函数执行前加new

  1. 形成一个私有作用域之后,代码执行之前,会默认创建一个空的对象(堆内存);
  2. 并且改变了当前作用域下的this指向,让其指向那个空对象;
  3. 当代码运行完,把这个对象返回,这是浏览器默认返回的。

:内置类和自定义类;所有的类都是函数;
实例:通过构造函数或者类new出来的都是一个实例。

普通函数和构造函数区别

  • 普通函数 形成私有作用域-->形参赋值-->变量提升-->代码从上到下执行-->作用域是否销毁
  • 构造函数 形成私有作用域-->形参赋值-->变量提升-->创建对象,让this指向这个对象-->代码从上到下执行-->return这个对象-->作用域是否销毁

构造函数的特征

  1. 构造函数中的this永远指向实例
  2. 构造函数的函数名一般都是大写,为了区分普通的函数。
  3. 如果构造函数,并且不需要参数的情况下,可以省略小括号。
  4. 如果return一个基本数据类型值,不能覆盖内置的(即默认的返回的对象或者实例);如果return一个引用的数据类型值,会覆盖默认的return的对象。
  5. instanceof:检测当前实例是否属于这个的方法,属于返回true,不属于返回false。
  6. hasOwnProperty:检测当前属性是否是私有属性,如果是返回true;不是返回false
    实例.hasOwnProperty(属性)
//封装一个检测共有属性的方法
function hasPublicProperty(obj,attr){
if(obj[attr}){//由于传入的参数是字符串,所以不能用obj.attr,可以用obj[attr]或者attr in obj;
               if(obj.hasOwnProperty(attr)===false){
         return true;
      }else{
         return false;
      }
      else{
         return false;
       }
   }
}
hasPublicProperty(obj,"tostring")

//优化以后
function hasPublicProperty(obj,attr){
       return attr in obj && !obj.hasOwnProperty(attr)?true:false;
}
hasPublicProperty(obj,"tostring")

原型模式

  1. 所有的函数数据类型都天生自带一个属性:prototype(原型),这个属性的值是一个对象:存储了当前类供实例调取使用的共有属性和方法。浏览器会默认给它开辟一个堆内存。
  2. 在浏览器默认给prototype开辟的堆内存中,即prototype属性中有一个天生自带的属性:constructor,这个属性存储的值是当前原型所属的类(当前函数本身)。
  3. 所有的对象数据类型都天生自带一个__proto__的属性,这个属性的属性值指向当前实例所属类的prototype(如果不能确定它是谁的实例,都是object的实例,即object.prototype)
  4. 所有的函数,包括普通函数、类(内置类、自定义类)都是Function的一个实例。
    (理解这四句话,基本上原型模式就算理解了)
    技术分享图片

原型链

它是一种基于__proto__向上查找的机制。当我们操作实例的某个属性或者方法的时候,首先找自己空间中私有的属性或者方法

  1. 找到了,则结束查找,使用自己私有的即可
  2. 没有找到的话,则基于__proto__找所属类的prototype,如果找到,就用这个共有的,如果没找到,基于原型上的__proto__继续向上查找,一直找到Object.prototype的原型为止,如果再没有,操作的属性或者方法不存,得到undefined。

这样通过__proto__向上查找就会形成一个原型链。

原型重定向

在实际项目基于面向对象开发的时候(构造原型设计模式),我们根据需要,很多时候会重定向类的原型(让类的原型指向自己开辟的堆内存)
当我们需要给类的原型批量设置属性和方法的时候,一般都是让原型重定向到自己创建的对象中

Fn.prototype={
   aa:function()
}

存在的问题:

  1. 自己开辟的堆内存中没有consturctor属性,导致类的原型构造函数缺失。

    解决:手动在堆内存增加constructor属性

  2. 当原型重定向后,浏览器默认开辟的那个原型堆内存会被释放掉,如果之前已经存储了一些方法和属性,这些东西都会丢失。(所以:内置类的原型不允许重定向到自己开辟的堆内存,因为内置类原型上自带很多属性和方法,重定向后都没了,这样是不被允许的)
  3. 内置类:内置类扩展时,如果和内置的方法名相同,会对其进行覆盖。但是内置类原型的空间地址不可以被修改,只能向其中新增一些方法。所以类.prototype={}只适用于自定义类,不能用于内置类,比如Array等这些内置类。

零碎知识点

私有属性和公有属性

  • 私有属性:自己堆内存中存储的属性相对自己来说是私有的
  • 公有属性:自己基于__proto__找到的属性,想对自己来说是公有的

基于内置类的原型扩展方法,供它的实例调取使用

//实现数组的去重
Array.prototype.myUnique=function myUnique(){//后边函数的名字可加可不加
//方法中的this一般都是当前类的实例(也就是我们要操作的数组)
   var obj={};
   for(var i=0;i<this.length;i++){
       var item=this[i];
       obj.hasOwnProperty(item)? (this[i]=this[this.length-1],this.length--,i--):obj[item]=item;
       }
    obj=null;//释放堆内存
    return this;   
};
ary.myUnique();
//链式写法求数组最大值
var max=ary.myUnique().sort(function(a,b){return a-b}).pop();
  1. 我们增加的方法最好设置“my”前缀(前缀自己定),防止把内置方法重写

JS的链式写法
保证每一个方法执行返回的结果依然是当前类的实例,这样就可以继续调取方法使用了

ary.sort(function(a,b){return a-b}).reverse().pop();
//执行完返回的结果是删除的那一项的值,所在再调用数组方法会报错,也可以接着使用其它内置类方法

创建变量之字面量创建和实例创建

var a=1;
var a1=new Number(1);
  • 通过字面量方式创建的实例(基本数据类型的实例)不是一个标准的实例,不能使用instanceof进行检测
  • 通过new创建的实例不能通过typeof进行数据类型的检测,都返回"object"

可枚举属性和不可枚举属性

用for...in...遍历会输出可枚举的属性

  • 可枚举属性:私有的属性和自定义的共有属性。
  • 不可枚举属性:是公有属性并且内置的属性。

call、apply、bind

call

[Fn].call([this],[param]...)
fn.call:当前实例(函数Fn)通过原型链的查找机制,找到Function.prototype上的call方法
fn.call():把找到的call方法执行

当call执行的时候,内部处理了一些事情

  1. 首先把要操作函数中的this关键字变为call方法第一个传递的参数值
  2. 把call方法第二个及第二个以后的实参获取到
  3. 把要操作的函数执行,并且把第二个以后的传递进来的实参传给函数

call中的细节(适用于apply和bind)

  1. 非严格模式下,如果参数不传,或者第一个参数是null、undefined,this都指向window;
  2. 严格模式下,第一个参数是谁,this就指向谁(包括null、undefined),不传this是undefined。

apply

apply:和call基本上一模一样,唯一区别在于传参的方式。apply把需要传递给FN的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于FN接受的是数组的每一项,而不是整个数组。

bind

bind:预处理this;提前改变this指向,但是FN不立即执行;bind的传参和call方式传参一致,需要一个个向里传。

fn.call(obj,10,20); //改变fn中的this,并且把fn立即执行
fn.bind(obj,10,20); //改变fn中的this,此时的fn并没有执行(不兼容IE6~8)

js之构造函数、原型模式

标签:基本数据类型   工厂   box   包括   修改   实参   构造   属性的方法   apply   

原文地址:https://www.cnblogs.com/wangxingren/p/10223994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!