体验js之美第八课-面向对象创建和继承终结篇

jzzlee 发布于2019-08-20 16:09 / 1297人阅读

摘要：概述到这里我们讲说面向对象的系列部分的最后一个课程，面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话，属性放在构造函数里面，方法放在原型上。

概述

到这里我们讲说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(); 
  
};

好，这样就鸟了，多么蓝的天啊，面向对象的语法就结束了，剩下的就是面向对象的实际案例了，比如组件化开发，后面我们就看看实际库怎么玩的。

云服务器 GPU云服务器 js 创建数组和对象 js 面向对象视频 oop面向对象 js js面向对象开发表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82750.html

Vue.js第八课表单

摘要：你可以用指令在表单控件元素上创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。如果要自动过滤用户输入的首尾空格，可以添加修饰符到上过滤输入这节我们为大家介绍 Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。showImg(https://segmentfault.com/img/bVOfeD?w=700&h=372); v-m...

weizx 2019-06-27 16:36 评论0 收藏0
体验javascript之美6：如果你觉得什么都会了或者不知道js学什么了看这里-面向对象编程

摘要：面向过程函数式编程面向对象编程第二个并不是大家理解的那样，我们先说举个现实例子就明白了。多说一句函数是编程是非常强大也是我最喜欢的，以后再说，我们先说面向对象编程。概述当大家已经把js的语言基础理解了，然后能够写出一些简单的例子了，这个时候基本上达到了一年工作经验的水平，而自己能够独立的写一些小功能，完成一些小效果，或者临摹修改一些比较复杂的插件的时候差不多就是两年工作经验的水平，...

changfeng1050 2019-08-20 15:59 评论0 收藏0
类的加载机制 - 收藏集 - 掘金

摘要：是现在广泛流行的代从开始学习系列之向提交代码掘金读完本文大概需要分钟。为了进行高效的垃圾回收，虚拟机把堆内存划分成新生代老年代和永久代中无永久代，使用实现三块区域。 React Native 开源项目 - 仿美团客户端 (Android、iOS 双适配) - Android - 掘金推荐 React Native 学习好项目，仿照美团客户端... 极简 GitHub 上手教程 - 工具...

Gilbertat 2019-08-14 18:40 评论0 收藏0