【js高级】03_对象高级

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量219 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58214412/article/details/123249002
版权

目录

1.对象创建模式

01_Object构造函数模式

02_对象字面量

03_工厂模式

04_自定义构造函数模式

05_构造函数+原型的组合模式

2.继承模式

01_原型链继承

02_借用构造函数继承

03_组合继承

 

1.对象创建模式

 

 

01_Object构造函数模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_Object构造函数模式</title>
</head>
<body>
<!--
方式一: Object构造函数模式
  * 套路: 先创建空Object对象, 再动态添加属性/方法
  * 适用场景: 起始时不确定对象内部数据
  * 问题: 语句太多
-->
<script type="text/javascript">
  /*
  一个人: name:"Tom", age: 12
   */
  // 先创建空Object对象
  var p = new Object()
  p = {} //此时内部数据是不确定的
  // 再动态添加属性/方法
  p.name = 'Tom'
  p.age = 12
  p.setName = function (name) {
    this.name = name
  }

  //测试
  console.log(p.name, p.age)
  p.setName('Bob')
  console.log(p.name, p.age)



</script>
</body>
</html>

 

 

02_对象字面量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_对象字面量</title>
</head>
<body>
<!--
方式二: 对象字面量模式
  * 套路: 使用{}创建对象, 同时指定属性/方法
  * 适用场景: 起始时对象内部数据是确定的
  * 问题: 如果创建多个对象, 有重复代码
-->
<script type="text/javascript">
  var p = {
    name: 'Tom',
    age: 12,
    setName: function (name) {
      this.name = name
    }
  }

  //测试
  console.log(p.name, p.age)
  p.setName('JACK')
  console.log(p.name, p.age)

  var p2 = {  //如果创建多个对象代码很重复
    name: 'Bob',
    age: 13,
    setName: function (name) {
      this.name = name
    }
  }

</script>
</body>
</html>

 

 

03_工厂模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_工厂模式</title>
</head>
<body>
<!--
方式三: 工厂模式
  * 套路: 通过工厂函数动态创建对象并返回
  * 适用场景: 需要创建多个对象
  * 问题: 对象没有一个具体的类型, 都是Object类型
-->
<script type="text/javascript">
  function createPerson(name, age) { //返回一个对象的函数===>工厂函数
    var obj = {
      name: name,
      age: age,
      setName: function (name) {
        this.name = name
      }
    }

    return obj
  }

  // 创建2个人
  var p1 = createPerson('Tom', 12)
  var p2 = createPerson('Bob', 13)

  // p1/p2是Object类型

  function createStudent(name, price) {
    var obj = {
      name: name,
      price: price
    }
    return obj
  }
  var s = createStudent('张三', 12000)
  // s也是Object




</script>
</body>
</html>

 

 

04_自定义构造函数模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_自定义构造函数模式</title>
</head>

<body>
<!--
方式四: 自定义构造函数模式
  * 套路: 自定义构造函数, 通过new创建对象
  * 适用场景: 需要创建多个类型确定的对象
  * 问题: 每个对象都有相同的数据, 浪费内存
-->
<script type="text/javascript">
  //定义类型
  function Person(name, age) {
    this.name = name
    this.age = age
    this.setName = function (name) {
      this.name = name
    }
  }
  var p1 = new Person('Tom', 12)
  p1.setName('Jack')
  console.log(p1.name, p1.age)
  console.log(p1 instanceof Person)

  function Student (name, price) {
    this.name = name
    this.price = price
  }
  var s = new Student('Bob', 13000)
  console.log(s instanceof Student)

  var p2 = new Person('JACK', 23)
  console.log(p1, p2)




</script>
</body>
</html>

 

 

05_构造函数+原型的组合模式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_构造函数+原型的组合模式</title>
</head>
<body>
<!--
方式六: 构造函数+原型的组合模式
  * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
  * 适用场景: 需要创建多个类型确定的对象
-->
<script type="text/javascript">
  function Person(name, age) { //在构造函数中只初始化一般函数
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }

  var p1 = new Person('Tom', 23)
  var p2 = new Person('Jack', 24)
  console.log(p1, p2)

</script>
</body>
</html>

 

 

2.继承模式

 

 

01_原型链继承

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_原型链继承</title>
</head>
<body>
<!--
方式1: 原型链继承
  1. 套路
    1. 定义父类型构造函数
    2. 给父类型的原型添加方法
    3. 定义子类型的构造函数
    4. 创建父类型的对象赋值给子类型的原型
    5. 将子类型原型的构造属性设置为子类型
    6. 给子类型原型添加方法
    7. 创建子类型的对象: 可以调用父类型的方法
  2. 关键
    1. 子类型的原型为父类型的一个实例对象
-->
<script type="text/javascript">
  //父类型
  function Supper() {
    this.supProp = 'Supper property'
  }
  Supper.prototype.showSupperProp = function () {
    console.log(this.supProp)
  }

  //子类型
  function Sub() {
    this.subProp = 'Sub property'
  }

  // 子类型的原型为父类型的一个实例对象
  Sub.prototype = new Supper()
  // 让子类型的原型的constructor指向子类型
  Sub.prototype.constructor = Sub
  Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
  }

  var sub = new Sub()
  sub.showSupperProp()
  // sub.toString()
  sub.showSubProp()

  console.log(sub)  // Sub



</script>
</body>
</html>

 

 

02_借用构造函数继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_借用构造函数继承</title>
</head>
<body>
<!--
方式2: 借用构造函数继承(假的)
1. 套路:
  1. 定义父类型构造函数
  2. 定义子类型构造函数
  3. 在子类型构造函数中调用父类型构造
2. 关键:
  1. 在子类型构造函数中通用call()调用父类型构造函数
-->
<script type="text/javascript">
  function Person(name, age) {
    this.name = name
    this.age = age
  }
  function Student(name, age, price) {
    Person.call(this, name, age)  // 相当于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
  }

  var s = new Student('Tom', 20, 14000)
  console.log(s.name, s.age, s.price)

</script>
</body>
</html>

 

 

03_组合继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_组合继承</title>
</head>
<body>
<!--
方式3: 原型链+借用构造函数的组合继承
1. 利用原型链实现对父类型对象的方法继承
2. 利用super()借用父类型构建函数初始化相同属性
-->
<script type="text/javascript">
  function Person(name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }

  function Student(name, age, price) {
    Person.call(this, name, age)  // 为了得到属性
    this.price = price
  }
  Student.prototype = new Person() // 为了能看到父类型的方法
  Student.prototype.constructor = Student //修正constructor属性
  Student.prototype.setPrice = function (price) {
    this.price = price
  }

  var s = new Student('Tom', 24, 15000)
  s.setName('Bob')
  s.setPrice(16000)
  console.log(s.name, s.age, s.price)

</script>
</body>
</html>

 

 

西西歪歪西歪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级教程-对象
qq_36973122的博客
07-01 266
JavaScript高级教程-对象
JS对象进阶
安然同学
05-14 278
JS对象进阶 代码github地址 1、对象创建模式 1、Object构造函数模式 套路：先创建空的Object对象，再动态添加属性/方法. 适用场景：起始时不确定内部数据 缺点：语句太多 实例代码： var p = new Object() p = {} //此时内部数据是不确定的 // 再动态添加属性/方法 p.name = 'Tom' p.ag...
对象创建和继承
qq_43641110的博客
08-29 151
1.对象创建模式 - 方式一: Object构造函数模式 用法: 先创建空Object对象, 再动态添加属性/方法 适用场景: 起始时不确定对象内部数据 问题: 语句太多 /* 一个人: name:"anna", age: 12 */ // 先创建空Object对象 var p = new Object() p = {} //此时内部数据是不确定的 // 再动态添加属性/方法 p.name = 'anna' p.age = 12 p.setName = function ...
JavaScript高级-03_对象高级
毕富国的博客
08-05 301
对象的创建模式 Object构造函数模式 var obj = {}; obj.name = 'Tom' obj.setName = function(name){this.name=name} 对象字面量模式 var obj = { name : 'Tom', setName : function(name){this.name = name} } 构造函数模式 ...
js高级部分--对象
szw_18583757301的博客
10-19 252
一.js中的对象： 内置对象：Math RegExp Date Array String Function…… 宿主对象: DOM BOM ; 自定义对象； 二.原始数据类型：基本类型 引用类型； 基本类型：number string null undefined boolean ; 引用类型：Object Math RegExp Date A
js高级对象
09-03
笔记js高级对象，介绍一些js高级对象的使用
javascript 高级 对象 object js
10-27
javascript 高级 对象 object js
1.16 JavaScript高级-面向对象.pdf
10-27
javascript部分内容第三节 内置对象 面向对象入门 基本包装类型 变量、作用域及内存
day10_JavaScript高级_docx1
08-04
1. 概念：Browser Object Model 浏览器对象模型 * 将浏览器的 1.在 2.定义一个方 3.定义一个定时 1.显 2.倒计时 3.在 1.
javascript面向对象程序设计高级特性经典教程(值得收藏)
10-22
主要介绍了javascript面向对象程序设计高级特性,结合实例形式详细讲述了javascript对象的创建,访问,删除,对象类型,扩展等,需要的朋友可以参考下
【jS高级】：三、面向对象高级（1.对象创建模式 2.继承模式）
qq_20535249的博客
11-18 196
三、面向对象高级 1.对象创建模式 方式①: Object构造函数模式 套路: 先创建空Object对象, 再动态添加属性/方法 适用场景: 起始时不确定对象内部数据 问题: 语句太多 /* 一个人: name:"Tom", age: 12 */ // 先创建空Object对象 var p = new Object() p = {} //此时内部数据是不确定的 ...
js 高级对象
weixin_34417635的博客
01-07 118
经过前段时间，学习《ajax完全自学手册》后，才知道javascript原来还可以这么写。 学过java,c#,vb的都知道类的概念，而类具有继承、封装、多态等功能。而javascript它不是面向对象语言，它是解释性语言。 但我们同样可以使用javascript来实现继承、多态。 Java实现类，有多种方法。   方法一：构造方法。 function coder(){ th...
JS面向对象实例、高级
weihongda666的博客
01-10 1812
·  选项卡用面向过程1 window.onload=function () { var oDiv = document.getElementById('div1'); var aDiv = oDiv.getElementsByTagName('div'); var aBtn = oDiv.getElementsByTagName('input'); for (var i=0;i<aB
对象
口耳戈是个生僻字
03-23 170
1. 什么是对象?  * 多个数据的封装体  * 用来保存多个数据的容器  * 一个对象代表现实中的一个事物2. 为什么要用对象?  * 统一管理多个数据3. 对象的组成  * 属性: 属性名(字符串)和属性值(任意)组成  * 方法: 一种特别的属性(属性值是函数)4. 如何访问对象内部数据?  * .属性名: 编码简单, 有时不能用  * ['属性名']: 编码麻烦, 能通用var p = {...
js高级 对象
weixin_44247157的博客
04-17 509
1.面向过程和面向对象 （1）面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 举个栗子：将大象装进冰箱，面向过程做法。 1.打开冰箱门 2.大象装进去 3.关上冰箱门 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 面向对象编程 OOP(Object Oriented Programming) 面向对象是把事务分解成为一个个对象，然后由对象之
js 基础学习笔记
Drizzlejj的博客
06-01 156
js for 循环 js join方法 js switch条件语句 js while 循环 js 递归函数 js 定时器 js 对象数据类型 js 构造函数 js 构造函数的不合理 js 构造函数的使用 js 回答问题循环案例 js 轮播图案例 js 面向对象选项卡 js 时间常用方法 js 时间常用方法案例 js 实现全选案例 js 事件下事件传播和阻止 js 鼠标跟随案
JS高级（2）
qq_60179418的博客
02-20 320
函数高级 原型与原型链 原型 函数的prototype属性 每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为原型对象）。原型对象中有一个属性constructor，它指向函数对象。 给原型对象添加属性（一般都是方法） 作用：函数的所有实例对象自动拥有原型中的属性（方法） <script type="text/javascript"> //每个函数都有一个prototype属性，它默认指向一个Object空对象（即：称为原型对象）
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
javascript高级程序设计 pdf
02-07
JavaScript高级程序设计是一本由Nicholas C. Zakas编写的经典书籍，全称为《JavaScript高级程序设计：第3版》。这本书是一本面向有一定JavaScript基础的开发者的高级指南，涵盖了JavaScript语言的各个方面和应用领域...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值