视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
每天一篇javascript学习小结(面向对象编程)_javascript技巧
2020-11-27 21:45:53 责编:小采
文档

1、面向对象的工厂方法

 function createPerson(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
 alert(this.name);
 }; 
 return o;
 }
 
 var person1 = createPerson("Nicholas", 29, "Software Engineer");
 var person2 = createPerson("Greg", 27, "Doctor");
 
 person1.sayName(); //"Nicholas"
 person2.sayName(); //"Greg"

工厂模型的方法的缺点是会产生大量重复代码!

2、构造函数模式创建对象



使用new关键字创建对象会经历以下四个过程

  • 1、创建一个新对象
  • 2、将构造函数的作用域赋给一个新对象(因此this就指向了这个新对象)
  • 3、执行构造函数的方法(为这个新对象赋值)
  • 4、返回新对象
  • 3、将构造函数当函数用

    
    
    

    构造函数当做函数使用就和普通的函数没有任何不同,它属于window对象下面添加的方法而已。由于构造函数创建的对象实际上是创建一个新对象,因此在本质上两者还是不一样的,还是分离的,他们的方法还是不一样的!

    4、将共有的方法方法全局解决不一致的问题

    
    
    

    虽然上面的方法解决了一致的问题,但是定义的全局的方法本身属于window,那么局部和全局就没有分开!所以这个方法使用的并不多见!也不建议使用。

    5、原型模式

    我们创建的任何的一个函数都有一个原型对象,这个属性是一个指针,它指向一个对象,而这个对象的作用是可以有特定的类型的所有的实例共享的方法!

    
    
    

    理解原型

    无论什么时候只要是创建了一个函数,就会创建一个原型属性,这个属性指向函数的原型对象。在默认的情况下,原型对象都会包含一个constructor(构造函数属性),这个属性包含一个指向prototype属性所在函数的指针!

    属性读取的顺序

    每当代码读取某个对象的属性时候,都会执行一次搜索,目标是具有给定名字的属性,搜索从对象的实例本身开始查找,如有则返回,没有则继续搜索该对象的原型链,直至搜索到原型链的最外层!

    
    
    

    如果删除了这个元素的实例属性

    
    
    

    6、hasOwnProperty方法

    这个方法可以检测一个属性是否存在于实例中,还是存在于原型中!hasOwnProperty是从Object继承来的,只要给定属性存在于对象实例中,才会返回true.

     function Person(){
     }
     
     Person.prototype.name = "Nicholas";
     Person.prototype.age = 29;
     Person.prototype.job = "Software Engineer";
     Person.prototype.sayName = function(){
     alert(this.name);
     };
     
     var person1 = new Person();
     var person2 = new Person();
     
     alert(person1.hasOwnProperty("name")); //false
     alert("name" in person1); //true
     
     person1.name = "Greg";
     alert(person1.name); //"Greg" ?from instance
     alert(person1.hasOwnProperty("name")); //true
     alert("name" in person1); //true
     
     alert(person2.name); //"Nicholas" ?from prototype
     alert(person2.hasOwnProperty("name")); //false
     alert("name" in person2); //true
     
     delete person1.name;
     alert(person1.name); //"Nicholas" - from the prototype
     alert(person1.hasOwnProperty("name")); //false
     alert("name" in person1); //true
    

    7、Object.keys() 可枚举属性方法

    这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组

    
    
    

    此方法高版本浏览器才支持

    8、简单的原型写法

    
    
    

    重写了原型就等于将默认的原型方法覆盖,那么同样的构造方法也会被重写,重写的构造方法指向了Object对象!而不是原来的对象Person

    如果还是想指向之前的构造方法,可以显示的指定

    
    
    

    9、原型方法的动态添加

    
    
    

    10、原生对象的原型方法

    
    
    

    11、组合使用构造函数和原型模式创建对象

    
    
    

    12、动态原型模式

    
    
    

    13、寄生构造函数模式

    
    
    

    上诉方法有一点说明下,由于它是依赖外层对象来创建一个新对象,因此不能依赖 instanceof方法来确定属性和方法的来源!它实际上和构造函数的没有关系!

    14、稳妥构造函数模式

    
    
    

    此方法不依赖任何new this 关键符!如果要访问对象的方法和属性,只能通过对象已经定义好的方法来获取!

    15、继承
    javascript实现继承是通过原型链来实现的

    
    
    

    上面的例子说明,重写的原型会覆盖之前继承的原型,最后返回的往往不是预期的效果

    
    
    

    下面的例子也说明重写原型带来的风险

    
    
    

    原型共享导致两个不同的对象调用的同一个数据
    16、借用构造函数来实现继承

    
    
    

    传递参数

    
    
    

    17、组合继承方式

    
    
    

    18、原型继承

    
    
    

    19、寄生组合式继承

    
    
    

    下载本文
    显示全文
    专题