JavaScript基础学习——面向对象编程

已于 2022-05-07 10:40:34 修改
阅读量2.4k 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： javascript js
于 2021-03-03 21:06:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41890177/article/details/114332527
版权

一、全局作用域

在函数外部定义的变量或函数，叫全局变量或全局函数。它们可以在当前程序的任意位置使用。在全局中定义变量可以用var，也可以直接添加window的属性。

生命周期：它们会一直占用内存，只能在当前文件中使用。如果想在多个文件中使用变量，需要用到cookie或本地存储。

例1 测试全局作用域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var x = 100
  function fn() {
    x += 10
    console.log(x);//1010
  }

  function fn1() {
    x *= 10
    fn()
    console.log(x);//1010
  }
  
  fn1()
  console.log(x);//1010

</script>

</html>

二、局部作用域

在函数内部定义的变量或函数，叫局部变量或局部函数。它们只能在函数内部使用。在函数内部用var定义局部变量，如果用window定义的变量，则为全局变量。

生命周期：从调用时开始创建，到函数执行完后立即销毁。

例2 测试局部作用域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  function fn() {
    var x = 'hello'
    window.y = 'world'
    function show(str) {
      return str + ',hello'
    }
    console.log(show('tom'));//tom,hello
  }
  fn()

  //console.log(x);//报错
  //console.log(show('tom'));//报错
  console.log(y);// 如果在函数内部用window定义变量，该变量为全局变量
</script>

</html>

三、块级作用域
在ES5中没有块级作用域，ES6中有。一对{ }为一个块，块级作用域就是变量或函数只在当前这组{}中有效。

在ES5中可以用IIFE实现块级作用域，ES6中用let实现。

四、IIFE

1、什么是IIFE？

IIFE（Immediately Invokeed Function Expression：立即执行函数表达式），声明函数的同时立即执行调用这个函数。定义的函数没有函数名，只能执行一次，无法在其它地方被调用，也不会造成全局污染。

2、IIFE的作用

可以用于解决运算中产生的全局污染问题（实际上它是一个闭包的写法）。它也是ES5中实现块级作用域的方式。

3、IIFE和特点
（1）将所有运算代码都放在匿名函数中；
（2）函数是一个表达式，没有函数名，只能被执行一次；
（3）执行一次后所产生的数据和变量就立即销毁，不会造成全局污染。

4、IIFE语法

(function(params){
  ...
})(exprs)

将函数的定义和调用写在一起。

5、IIFE的用法（推荐用前面两种写法）

(function(形参列表){
    ...
    window.变量 = 表达式;
})(实参列表);

例3 测试第一种写法 计算1+2+3+...+100

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  (function () {
    for (var i = 0, sum = 0; i <= 100; i++) {
      sum += i
    }
    window.rs=sum
  })()
  console.log(rs);
</script>

</html>

var 变量名 = (function(形参列表){
    ...
    return 表达式;
})(实参列表);

例4 测试第二种写法 计算1+2+3+...+100

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var rs = (function () {
    for (var i = 0, sum = 0; i <= 100; i++) {
      sum += i
    }
    return sum
  })()
  console.log(rs);
</script>

</html>

!(function(形参列表){
    ...
    return 表达式;
})(实参列表);

+(function(形参列表){
    ...
    return 表达式;
})(实参列表);   

五、闭包

1、什么是闭包？

闭包就是一种作用域的体现，函数外部可以访问函数内部的数据。正常情况下，函数外部不能访问函数内部的变量，但是通过这种特殊的写法，将函数内的子函数暴露在全局上，可以在外部调用且可以访问到函数内部的数据，即可以让全局访问局部的数据。

简单地说：就是在函数外部获取函数内部的数据。

2、闭包的作用

（1）实现函数外部可以访问函数内部的数据；

（2）减少了全局变量的使用，避免全局变量的污染。

3、闭包的特点
（1）闭包一定是函数内嵌套函数；
（2）闭包是一种作用域的体现，函数外可以访问函数内的数据；
（3）闭包采用IIFE写法，由于内部数据被全局所调用，将延缓资源的回收（即闭包中的变量的值用完后不会立即销毁，会驻留内存一段时间）。

4、闭包的缺点
（1）闭包中的变量会占用更多的内存空间；
（2）可能会导致内存泄露。

5、闭包的写法

第1种写法：
      (function(){
        ...
        window.函数名 = function(){
          ...
          return 变量;
        }
      })()

例5 测试第一种写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  (function(){
    var i=10;
    window.result=function(){
      ++i
      return i
    }
  })()

  console.log(result());//11
  console.log(result());//12 


</script>

</html>

第2种写法：
      var 变量 = (function(){
        ...
        return function(){
          ...
          return 变量;
        }
      })()

例6 测试第二种写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>

  var rs = (function () {
    var i = 10;
    return function () {
      ++i;
      return i;
    }
  })()
  console.log(rs());//11
  console.log(rs());//12
  console.log(rs());//13

</script>

</html>

六、内存管理

在闭包中调用局部变量，会导致这个局部变量无法及时被销毁，相当于全局变量一样会一直占用着内存。如果需要回收这些变量占用的内存，可以手动将变量设置为null。然而在使用闭包的过程中，比较容易形成 JavaScript 对象和 DOM 对象的循环引用，就有可能造成内存泄露。这是因为浏览器的垃圾回收机制中，如果两个对象之间形成了循环引用，那么它们都无法被回收。

解决方案：
（1）把循环引用中的变量设为 null 即可；
（2）把闭包写法改造成一个引用外部函数写法。

例7 测试内存管理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  (function () {
    var box = document.getElementsByClassName('box')[0]
    box.onclick = txt
    box = null
  })()

  function txt() {
    console.log(document.getElementsByClassName('box')[0].innerHTML)
  }
</script>

</html>

七、JavaScript对象

对象分为内置对象（构造函数/方法）和用户自定义对象。

1、内置对象：String Date Math RegExp Function Object Array Boolean Number...
var str1 = new String('abc');// 类型为object
var str2 = 'abc'  // 类型为string

2、用户自定义对象

（1）字面量
      var obj1 = {
        name: 'aaa',
        sex: 'male'
      }

（2）用new构建
      var obj2 = new Object({
        name: 'aaa',
        sex: 'male'
      })

（3）构造函数（相当于ES6中类）

      a.创建方法
        function 构造函数名/类名(形参列表){
          // 类的特征-属性
          this.属性名 = 参数;
          ...

          // 类的形为-方法
          this.方法名 = function(){
            ...
          }
          ...
        }
      b.使用构造函数实例化对象
        var 对象名 = new 构造函数名/类名(实参列表)
      c.构造函数特征
        i)构造函数名（类名）首字母要大写（W3C的规定）（要使用大驼峰写法）；

          补充：
            小驼峰写法：studentClassicScore
            大驼峰写法：StudentClassicScore
        ii)属性和方法都要挂载到this上；
        iii)没有return语句。
      d.实例化机制
        i)创建一个对象；
        ii)将构造函数中的this指向新对象；
        iii)执行构造函数中的语句，将所有的属性和方法挂载到新的对象上；
        iv)把新的对象的内存地址赋值给变量。
      e.问题
        如果构造函数实例化的对象中的属性和方法的内容一样，因为它们会各自占用独立的空间，会造成内存的浪费。

例8 构造函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  //创建构造函数
  function Person(name, sex, age) {
    this.name = name
    this.sex = sex
    this.age = age
    this.classic = 'student'
    this.show = function () {
      console.log('message:' + this.name + ',' + this.sex + ',' + this.age);
    }
    this.play = function () {
      console.log('play()');
    }
  }

  //实例化对象
  var zs = new Person('zs', 'man', 19)
  console.log(zs);
  zs.show()
  zs.play()

  var ls = new Person('ls', 'woman', 19)
  console.log(ls);
  ls.show()
  ls.play()

</script>

</html>

4、原型
      a.什么上原型？
        原型就是prototype，所有function定义的函数都拥有这个属性。
        prototype这个属性是一个对象，也是一个指针，是用来添加所有实例共享属性和方法的。
      b.原型的作用
        i)解决方法过载（为每个对象都单独创建一个方法，浪费了大量的内存资源，这种情况叫方法过载）；
        ii)扩展构造函数的属性和方法（功能）。
      c.原型的写法
        i)扩展属性
          构造函数名.prototype.属性名 = 表达式;
        ii)扩展方法
          构造函数名.prototype.方法名 = function(){
            ...
          }
        
        注意：在开发过程中，私有属性和方法放在构造函数中，而共享属性和方法用原型添加。

例9 原型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // 创建构造函数
  function Person(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;

    this.show = function () {
      console.log('您的信息为：' + this.name + ',' + this.sex + ',' + this.age)
    }
  }

  Person.prototype.classic = { type: 'student' } // 为Person构造函数添加了一个共享属性classic

  Person.prototype.play = function () { // 为Person构造函数添加了一个共享方法play()
    console.log('喜欢打篮球！')
  }

  //实例化对象
  var zs=new Person('zs','man',20)
  console.log(zs);
  zs.play()

  var ls=new Person('ls','woman',20)
  console.log(ls);
  ls.play()

  console.log(zs.classic === ls.classic);//true
  console.log(zs.play === ls.play);//true 说明play()是共用了一段内存空间
</script>

</html>


5、混合模式

混合模式 = 构造函数 + 原型 
在构造函数中定义私有的属性和方法，通过原型添加共享的属性和方法。

例10 混合模式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  //混合模式
  function CreatePerson(name, age) {
    this.name = name
    this.age = age
  }

  CreatePerson.prototype.showName = function () {
    return ('name is:' + this.name)
  }

  CreatePerson.prototype.showAge = function () {
    return ('age is:' + this.age)
  }

  var per1 = new CreatePerson('zs', 20)
  var per2 = new CreatePerson('ls', 20)

  console.log(per1.showName());
  console.log(per1.showAge());
  console.log(per2.showName());
  console.log(per2.showAge());
</script>

</html>

6、基本模式（JSON语法格式）
      var 对象 = {
        属性：属性值,
        ...,
        方法：function(){...},
        ...
      }

这样做的目的是为了减少全局变量和全局方法的使用，从而避免全局污染。

例11 基本模式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">id</div>
  <div class="box">class</div>
  <p>pppppp</p>
  <p>pppppp</p>
  <p>pppppp</p>
</body>
<script>
  //封装获取DOM
  var $ = {
    id: function (id) {
      return document.getElementById(id)
    },
    cls: function (className) {
      return document.getElementsByClassName(className)
    },
    tag: function (tagName) {
      return document.getElementsByTagName(tagName)
    }
  }

  $.id('box').innerHTML = 'this is id'
  $.cls('box')[0].style.color = 'red'
  $.tag('p')[1].style.cssText = 'color:blue;border:1px solid #eee'
</script>

</html>

7、工厂模式

一般用于大批量创建对象（这批对象有相同的属性和方法）。给定一些值，创建一个结果。

      a.创建方法：
        创建一个函数，在函数中创建对象，最后再返回这个对象。

      b.缺陷
        让不同对象有不同属性或方法，工厂模式就很难实现了。

      c.优点
        减少了重复性代码。

  混合模式（构造函数+原型）在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。

例12 工厂模式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  function fn(name, sex) {
    var obj = new Object()
    obj.name = name
    obj.sex = sex
    obj.show = function () {
      console.log(obj.name);
    }
    return obj
  }

  var s1 = fn('zs', 'man')
  var s2 = fn('ls', 'woman')

  s1.show()
  s2.show()

  console.log(s1 instanceof fn) // false 说明s1不是fn的实例
  console.log(s1 instanceof Object) //true
</script>

</html>

八、this（面试核心点）

this是一个地址指针。

1、全局中的this，指向window对象。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var x = 100
  console.log(this);//window
  console.log(window.x, this.x, x);//100,100,100
  console.log(window === this);//true
</script>

</html>

2、函数中的this
原则：谁调用就指向谁。一般情况下是指向window对象的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var name = 'tom'
  function fn() {
    var name = 'mike'
    console.log(this.name);//tom
    console.log(name);//mike
  }
  fn()
</script>

</html>

如果开启了"use strict;"严格代码格式，this指向的是window。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  'use strict'
  var name = 'tom'
  function fn() {
    var name = 'mike'
    //console.log(this.name);//在严格代码格式下，this是没有指向的
    console.log(this);//undefined
    console.log(name);//mike
  }
  fn()
</script>

</html>

3、对象方法中的this，指向当前对象。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var obj = {
    id: '001',
    goodsName: 'hello',
    price: 9999,
    salePrice: function () {
      console.log(this.goodsName + ":" + this.price);
      console.log(this);//指向当前对象
    }
  }
  obj.salePrice()
</script>

</html>

4、构造函数中的this，指向当前实例化的对象。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  function Car(name, type, color) {
    this.name = name;
    this.type = type;
    this.color = color;

    this.show = function () {
      console.log(this.name + this.type + this.color);
      console.log(this)
    }
  }
  Car.prototype.price = 190000;
  Car.prototype.run = function (time) {
    console.log(this.name + '百公里加速时间为：' + time + '秒！')
  }

  var car1 = new Car('大众', '家用版', '白色');
  var car2 = new Car('卡宴', '豪华版', '土豪金');

  car1.show()
  car2.show()
  car1.run(15)
  car2.run(5)
</script>

</html>

5、借来的this，所有函数都有三个方法（call、apply和bind），可以用它们实现函数中this指向新的对象（修改函数中this的指向）。

（1）call：主动式将函数中的this指向新的对象，调用一次就立即执行一次（谁调用就指向谁）。

语法：被调用对象的方法.call（当前对象，参数1，参数2，...）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var p1 = {
      name: 'zs'
    }
    p1.tel=function(){
      console.log(this.name+" call for ls");
    }

    var p2={
      name:'ww'
    }

    p1.tel.call(p2)// p2借p1的tel方法  this指向了p2这个新的对象

    console.log(p1);
    console.log(p2);
  </script>
</body>

</html>

（2）apply

用法与call一样，只是传参格式不一样。传参必须以伪数组的方式传递，不管有几个参数，都必须以这种格式进行传递。

语法：被调用对象的方法.apply（当前对象，[参数1，参数2，...]）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var p1 = {
      name: 'zs'
    }
    p1.tel = function (callName, time) {
      console.log(this.name + '给' + callName + "打了" + time + "分钟电话");
    }

    var p2 = {
      name: 'ls'
    }

    // p1.tel.call(p2, 'ww', 30)//传参用列表
    p1.tel.apply(p2, ['ww', 30])//传参用伪数组
  </script>
</body>

</html>

（3）bind（ES5新增）

被动式改变this指向，实现对原对象的拷贝。

语法：回调函数.bind（对象，参数1，参数2，...）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var name = '这是全局的name'
    var obj = {}
    obj.name = 'zs'
    obj.show = function (str) {
      console.log(this);
      setTimeout(function (str1, str2) {
        console.log(this.name + str + str1 + str2);
      }.bind(this, 'aaa', 'bbb'), 1000);
    }

    obj.show('is a good people')
  </script>
</body>

</html>

6、call、apply和bind的区别

相同点：
    i)都是函数原型的方法，可以改变函数中this的指向；
    ii)第一个参数都是this要修改的目标对象；
    iii)都可以传递参数。

不同点：
    i)call和apply是主动式的，修改this指向时立即调用1次；
    ii)bind是被动式的，只修改this的指向，不执行；
    iii)call的参数是直接列举在对象的后面，而apply是以伪数组的形式传参；
    iv)bind一般用在回调函数中。

梦起孟心
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
《JavaScript函数式编程思想》——从面向对象到函数式编程
JavaScript
02-15 2881
第9章  从面向对象到函数式编程 假如本书的写作时间倒退回十年前，书名可能会变成JavaScript面向对象编程思想。自上世纪90年代兴起的面向对象编程思想随Java的繁荣达于顶点，在JavaScript从一门只被用来编写零星的简单的表单验证代码的玩具语言变成日益流行的Web应用不可取代的开发语言的过程中，脚本的作者们也逐渐学习和习惯了被视为软件开发正统的面向对象编程。等到盛极而衰，面向对象编程...
js——面向对象
m0_58471238的博客
10-16 2993
js——面向对象
JavaScript——面向对象编程
最新发布
chenzoff的专栏
11-03 920
JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念： 类: 类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生 对象:实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。 在JavaScript
JS基础——面向对象编程OOP
ZKH129的博客
06-14 125
JS基础——面向对象编程OOP
JavaScript 学习笔记——内部对象/面向对象编程
weixin_49001740的博客
03-08 1389
JavaScript 快速入门 学习笔记 五、内部对象 六、面向对象编程
写的都是看到的——面向对象编程（一）
杨森源的博客
11-12 2460
第一天的经历使小白深深认识到校园学到的知识与实际工作中的偏差，所以想见识见识公司团队里大家都是如何书写代码并完成需求的。早晨走进公司的时候恰巧遇见了项目经理。两种编程风格——面向过程与面向对象“早！小白，今天是你来的第二天，这一周你熟悉一下我们团队的项目吧。”项目经理对小白说。“好呀，项目经理，我也正想跟大家学习学习呢。”于是项目经理带着小白将项目中的代码下载下来。可小白打开一看傻眼了：“函数，昨天
JavaScript面向对象编程——构造函数继承
小一的专栏
06-12 3778
前言上一篇文章介绍了JS里如何“封装”数据和方法，以及如何从原型对象生成实例。 这篇文章要介绍的，对象之间“继承”的五种方法。例如，现在有一个Animal对象的构造函数：function Animal() { this.species = "animal"; }还有一个Cat对象的构造函数：function Cat(name, color) { this.name = name;
学习JavaScript的面向对象编程——JavaScript贪吃蛇小游戏
qq_42586895的博客
02-14 1469
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程 预览支持移动端和pc端哦。 Github源码地址：https://github.com/fu-x/snake 游戏预览：http://coolxiang.top/snake 编程思想：面向对象 分析 首先对贪吃蛇游戏进行逻辑分析。 1. 小蛇需要移动，需要一个参数表示移动方向。 2. 小蛇可以吃食物，蛇头和食物坐标相等让...
JavaScript 高级——详谈面向对象
热门推荐
官方推荐
10-26 3万+
1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 1.3面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于
JavaScript 进阶教程(1)--面向对象编程
AlbertYang的博客
08-16 1万+
1 学习目标 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 2 面向对象介绍 2.1什么是对象 Everything is object （一切皆对象） 我们可以从两个层次来理解对象： (1) 对象是单个事物的抽象。 一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。 (2) 对象是一个.
JavaScript面向对象编程指南
06-07
封装是面向对象编程的基础，它将数据和操作这些数据的方法捆绑在一起，形成一个独立的实体——对象。在JavaScript中，可以使用构造函数和原型来创建对象，并通过`this`关键字来引用对象的属性和方法。例如： ```...
JavaScript 面向对象编程
01-03
本文将重点介绍JavaScript面向对象编程的基础概念和实现方式。 #### 二、JavaScript中的对象和属性 在JavaScript中，一切皆为对象。无论是内置类型如字符串、数字还是自定义的对象，都可以被视为具有属性和方法的...
jOOPL：JavaScript的面向对象编程
04-07
**标题：“jOOPL：JavaScript的面向对象编程”** JavaScript，作为互联网上最广泛使用的脚本语言，一直以来都是动态和函数式编程的代名词。然而，随着技术的发展，JavaScript已经发展出了面向对象编程（OOP）的能力...
Javascript oop设计模式 面向对象编程简单实例介绍
10-20
JavaScript中的面向对象编程（OOP）是编程领域中一种重要的设计模式，它允许开发者通过类和对象的概念来组织代码，从而提高代码的可维护性和复用性。在JavaScript中，由于语言特性，OOP实现与传统面向对象语言略有...
JavaScript面向对象编程指南.pdf
12-10
根据提供的文件信息，我们将重点放在面向对象编程(OOP)在JavaScript中的应用上。JavaScript作为一种广泛使用的脚本语言，不仅在浏览器环境中发挥着重要作用，在服务器端开发（如Node.js）及桌面应用程序开发等领域也...
javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf
03-07
通过学习这两本书，读者不仅可以掌握JavaScript的面向对象编程基础，还能了解到如何在实际项目中应用设计模式，从而提升开发水平和团队协作效率。无论是初学者还是有经验的开发者，都能从中受益匪浅，为构建高质量的...
JS面向对象编程——ES6 中class的继承用法详解
11-21
JavaScript是一种基于对象的语言，虽然它的面向对象特性与传统面向对象编程语言有所不同，但在ES6中引入的`class`语法糖让其变得更加接近经典的面向对象概念。`class`关键字的使用大大简化了对象的创建和继承过程，...
浅谈javascript面向对象编程
03-19
### 浅谈JavaScript面向对象编程 #### 一、概述 面向对象编程(OOP)是一种编程范式，它使用“对象”来设计软件。在JavaScript中，尽管语言本身并不支持传统的类(class)概念，但开发者可以通过原型继承和其他技术来...
面向对象——操作符
01-20
本文将详细介绍几个在面向对象编程中用于操作和检查对象的关键操作符。 1. `instanceof` 操作符： `instanceof` 用于判断一个对象实例是否是某个构造函数的实例。在给定的代码示例中，`s1 instanceof Son` 和 `s1 ...
现代JavaScript面向对象编程探索
理解JavaScript的面向对象编程是编写大型、可维护的JavaScript应用的基础。通过掌握构造函数、原型、继承和封装等概念，开发者可以构建出复杂且易于扩展的系统。同时，随着JavaScript在Web开发中的重要性日益增长，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值