JS面向对象

最新推荐文章于 2020-08-11 00:05:49 发布
最新推荐文章于 2020-08-11 00:05:49 发布
阅读量249 收藏
点赞数
分类专栏： Javascript

         关于原生JS的一些理解：

面向对象是什么？

      面向对象本身就是一种处理问题的思路，是对传统面向过程编程的一种补充和完善；

核心是类和对象的抽象封装和创建，通过创建的各种对象之间互相协作（互相调用函数）完成一个功能的完整流程；

通过面向对象的三大特征封装、继承、多态，来提高程序的健壮性、代码的复用性和功能的强大的扩展性。


核心：

                类和对象

特性：

                1.封装零散的数据,方便数据的统一管理和支配使用
                2.有利于提高代码的复用性、降低代码之间的耦合性、提升功能的扩展性；

 特征：

                封装、继承、多态

 使用：

  构造函数

                 JS模拟面向对象，出现的一个概念
                 专门被用来创建对象
                 和new关键字一起使用！
                  function Type(参数) {
                        this.属性 = 属性值;
                  }
                  var t = new Type();
                  名称：帕斯卡命名法
                  构造函数——原型对象——prototype
                  用来构建和挂载构造函数对应的对象公共的属性和行为函数的！
                  继承~

                     apply/call实现的假继承，这两个方法的作用和区别
                    apply(args, [])
                    call(args, ...obj)

那么什么是继承？
        在继承中，会出现两个类型【父类、子类，子类继承父类的属性和行为】

继承是用来做什么的：
        继承是通过子类继承父类实现父类中代码的重复利用！

继承的使用注意事项：
         尽量让一个父类有一个或者多个子类
         一个子类只继承一个父类

 通过Prototype原型对象和空对象结合使用来实现完整的继承！
                    Animal(){}
                                        F() {}
                        prototype ====  prototype
                                                      Cat() {}
                                         new F() === prototype

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <script>  
  7.         /*var Animal = function(name, color) {  
  8.             this.name = name;  
  9.             this.color = color;  
  10.         }  
  11.         Animal.prototype.eat = function() {console.log("吃肉");}  
  12.   
  13.         var Cat = function(name, color, age, type) {  
  14.             // Animal.apply(this, [name, color]);  
  15.             Animal.call(this, name, color);  
  16.             this.age = age;  
  17.             this.type = type;  
  18.         }  
  19.         Cat.prototype.caches = function() {console.log("抓老鼠..");}  
  20.   
  21.         var cat = new Cat("tom", "黑色", 48, "猫科");  
  22.         console.log(cat);*/  
  23.   
  24.         /**  
  25.          * 2.通过prototype和空对象进行间接继承  
  26.          */  
  27.         var _extends = function(Child, Parent) {  
  28.             var F = function() {};  
  29.             F.prototype = Parent.prototype;  
  30.             Child.prototype = new F();  
  31.             Child.prototype.constructor = Child;  
  32.         }  
  33.   
  34.         var Animal = function(name,age) {  
  35.             this.name = name;  
  36.             this.age = age;  
  37.         }  
  38.         Animal.prototype.play = function() {console.log("play gaming!");}  
  39.   
  40.         var Cat = function(name, age, color) {  
  41.             this.color = color;  
  42.         }  
  43.   
  44.         _extends(Cat, Animal);  
  45.   
  46.         var cat = new Cat();  
  47.         console.log(cat);  
  48.     </script>  
  49. </head>  
  50. <body>  
  51.   
  52. </body>  
  53. </html


静默不语
关注
专栏目录
原生JS面向对象
The bear eat hand的博客
05-01 477
面向对象是什么？ 面向对象本身就是一种处理问题的思路，是对传统面向过程编程的一种补充和完善； 核心是类和对象的抽象封装和创建，通过创建的各种对象之间互相协作（互相调用函数）完成一个功能的完整流程； 通过面向对象的三大特征封装、继承、多态，来提高程序的健壮性、代码的复用性和功能的强大的扩展性。 核心：                 类和对象 特性：            
js面向对象理解
weixin_30508309的博客
07-26 1676
js面向对象理解 ECMAScript 有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。 js（如果没有作特殊说明，本文中的js仅包含ES5以内的内容）本身是没有class类型的，但是每个函数都有一个pr...
原生js面向对象
qq_35363709的博客
04-28 413
在JavaScript的大世界里讨论面向对象，都要提到两点：1.JavaScript是一门基于原型的面向对象语言 2. 模拟类语言的面向对象方式。对于为什么要模拟类语言的面向对象，我个人认为：某些情况下，原 型模式能够提供一定的便利，但在复杂的应用中，基于原型的面向对象系统在抽象性与继承性方面差强人意。 由于JavaScript是唯一一个被各大浏览器支持的脚本语言，所以各路高手不
原生js面向对象？看这一篇就够了
m0_47883103的博客
08-11 2667
类的本质 类的本质其实还是一个函数，我们也可以简单的认为，类就是函数的另外一种写法 创建方法 class name { // class body } 在类里添加函数 class name { // class body 函数名称(){} } // 使用： 对象名.函数名称(参数)； 利用类创建对象 var 对象名 = new name(); 利用类创建的对象使用类里的方法 对象名.类里的方法名(传参) 类 constructor 构造函数 consrtuctor() 方法是类的构造函数（默
Javascript面向对象编程.
03-26
在提供的资源中，《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导，而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
js 面向对象实例
05-30
在JavaScript面向对象的上下文中，我们可以创建专门处理Canvas绘图的类，封装复杂的绘图逻辑： ```javascript class Circle { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; } ...
js面向对象
01-08
什么是面向对象 在js中对象是一个无序的数据集合或者也可以说是属性和方法的集合，可以动态的添加属性可方法。面向对象是一种软件开发的思想和面向过程是相对应的，就是把程序看作一个对象，将属性和方法封装其中，...
JavaScript 面向对象基础简单示例
10-16
JavaScript是一种基于原型的面向对象编程语言...你可以通过阅读更多的JavaScript面向对象教程，学习错误调试技巧，以及数据结构和算法来深化你的理解。通过实践和不断探索，你将能够熟练掌握JavaScript的面向对象编程。
再谈javascript面向对象编程
12-09
JavaScript并非Java的子集或附属品，而是一门独立的语言，拥有自己独特的面向对象编程机制。尽管它的名称可能会引起混淆，但JavaScript的正式名称是ECMAScript，这是由欧洲计算机制造商协会（ECMA）制定的标准。 ...
原生js面向对象实现和es6
qq_33002773的博客
12-15 269
// 定义一个动物类 function Animal (name) { // 属性 this.name = name || ‘Animal’; // 实例方法 this.sleep = function(){ console.log(this.name + ‘正在睡觉！’); } } // 原型方法 Animal.prototype.eat = function(food) { console.l...
原生js (面向对象版) --- 小羊肖恩动画(可拖拽)
小柒的前端之旅
03-16 853
这个案例，js部分分两个大块： 1：创建小羊 2: 小羊运动 其中小羊运动部分分3块： 1）小羊在初始位置运动起来 2）小羊在从屏幕右边，运动到屏幕左边 3) 小羊拖拽到屏幕的任意地方，拖拽时小羊停止运动 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;me
原生Javascript面向对象
sky_moon_y的博客
04-30 532
原生JS
JS笔记（2/8）之原生对象，面向对象编程
weixin_42103141的博客
05-09 339
标准库（对象）Console 对象与控制台Object 对象 Console 对象与控制台 Object 对象
js面向对象编程
cp3___的博客
06-06 497
前端经典面试题js面向对象 1、什么是面向对象 面向对象就是用函数来封装一些特定的属性和方法，用来使用 2、使用方法 1）创建函数 function animal(cat,dog) { this.cat = cat; this.dog = dog; console.log(cat,dog); console.log...
js原生之面向对象
qq_42954938的博客
11-09 178
es6中的面向对象 Title //个人写的一个方法类库 用面相对向写的下雨小案列。
原生JavaScript面向对象
JinLong的博客
04-30 673
原生JavaScript面向对象详解           敲黑板！今天我们要重点说一下原生JavaScript面向对象！！！      首先大家都知道对象是啥意思吗？哈哈，说白了就是女朋友呀媳妇儿呀，唉，可怜我这单身狗，到现在也木有对象      不过在原生JS中，我可以创造对象、天天面向我这对象，哈哈，想想就很开森呢！      咳咳，扯淡归扯淡，现在我们要言归正传了，我们要把这
面向对象的JS代码
weixin_30654419的博客
07-15 85
在下面的例子中可以找到强类型语言中所描述的类，属性，方法，对象。 <script language="javascript" type="text/javascript"> //定义了类型Leature[构造函数] function Lecture(name, tea) { this.name = name; //...
原生js面向对象基本思想及介绍
u013239236的专栏
01-23 3271
今天学习了js面向对象，勉强算是面向对象吧，首先比较js是基于对象的饿，要想高级语言（java和。net）那样完全面向对象是不可能的，因为面向对象的三大特征，封装，继承，多肽，但在js不存在多肽，因为如果在同一个js文件中定义2个方法名相同的方法，不论参数个数，参数类型（js中参数不存在类型），是否相同，浏览器从上到先解析js文件（htnl文件），会已最后一个方法为准，最后一个方法（函数）会掩盖之
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值