体验js之美第八课-面向对象创建和继续闭幕篇

2024年3月4日 111次阅读 来源: 前端大彬哥

概述

到这里我们讲说js面向对象的系列部份的末了一个课程，面向对象必需控制两个东西一个是对象的建立一个是继续。这节课我们重点说说这两个题目末了我们说下在ES6内里面向对象怎样玩。

1对象的建立

我们第一节课已就会用了，单体形式，你能够管它叫json我也不想多说就是这个。

var girlFriend = {
      //属性：
      hair:"long",
      eye:"big",
      hobby:"travel",
      //要领
      cook:function(){},
      wash:function(){}
 };

下面我说一种更广泛的体式格局，这个人人看到的状况更广泛，我们一直说js的对象和传统对象不一样它是基于原型的，那末看看建立对象体式格局。

只须要记着一句话，属性放在组织函数内里，要领放在原型上。

好如今我们从新搞一个妹子，用你熟习的姿态。

//属性放在组织函数里
function Girl (hair,eye,hobby){
      this.hair = hair;
      this.eye = eye;
      this.hobby = hobby;
}
//要领放在原型上
Girl.prototype.cook = function(){};
Girl.prototype.wash = function(){}

var girlFriend = new Girl('long','big','travel');

如许不挺好吗，我们都如许用啊。

这里我就说下，new症结字的由来。

简朴的说new症结字并不应出如今js里，或者说并非手艺缘由，仅仅是因为为了争夺java那部份用户，所以javascript才叫javascript，然后类这一块又运用了new症结字去相符java程序员的习气，博得他们的好感，所以new症结字的涌现现实上是一个市场策略。然则题目来了，javascript基于原型和java这些言语的类跟js基础不是一个观点new怎样用啊？好，我们上例子申明：
//属性放在组织函数里
function Girl (hair,eye,hobby){
      this.hair = hair;
      this.eye = eye;
      this.hobby = hobby;
}
//要领放在原型上
Girl.prototype.cook = function(){};
Girl.prototype.wash = function(){}

var girlFriend = new Girl('long','big','travel');

那new症结字干吗了？

简朴的说做了三件事：

1.实行组织函数（别太忧郁名词，就当做一般函数就行，一nainai区分都没）
2.在Girl这个组织函数内里，建立一个 空缺的Object
3.将 this 指向这个空缺的Object

这里运用我并不引荐运用new，为何？

有人说运用new能够涌现的题目是把new忘记了就会返回undefined，比方我道哥（Douglas Crockford’s，JSON的创造者，《javascript言语精华》的作者，多说一句，《javascript言语精华》初学者不要看，你会只要两个题目，这个画的是啥，这特么画的又是啥），然则个人认为症结缘由不是这个，毕竟修复忘记的new至少有两种体式格局，一种大写组织函数要领首字母作为提示，一种是用函数要领，我这里就不睁开说了，毕竟不重要。

症结缘由是JavaScript是一种prototypical范例言语，在建立之初，是为了投合市场的须要，让人们以为它和Java是相似的，才引入了new症结字。Javascript本应经由过程它的Prototypical特征来完成实例化和继续，但new症结字让它变得不三不四。

不空话怎样处理，

一种体式格局是运用jquery的体式格局，返回一个含有new 对象的函数，然则这个并没有从本质上转变运用new.

第二种体式格局完全扬弃new.

作为一个面向对象编程不过就体贴两件事，建立和继续。

那好我们看看建立的时刻怎样搞，

第一种体式格局，单体形式，不必墨迹了。

第二种体式格局，就不讲了，实在就是jquery谁人体式格局，我们怎样简朴怎样来。

单体形式

var girlFriend = {
      //属性：
      hair:"long",
      eye:"big",
      hobby:"travel",
      //要领
      cook:function(){},
      wash:function(){}
 };

好症结看继续，我们瞥见你女儿怎样把你女朋友的优秀基因继续下来的。

简朴的怒不可遏。

var daughter =  Object.create(girlFriend);

完了，确切完了，这就继续完了，之前的改this指向，什么修正原型，去你妹的一切的没了。

我晓得你想说啥，我擦嘞，兼容性咋样。好吧，本着授人以鱼不如授人以红烧鱼的精力，大彬哥给你搞一把

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

好，如许就鸟了，何等蓝的天啊，面向对象的语法就完毕了，剩下的就是面向对象的现实案例了，比方组件化开辟，背面我们就看看现实库怎样玩的。

    原文作者：前端大彬哥
    原文地址: https://segmentfault.com/a/1190000009242920
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞