六、js面向对象

最新推荐文章于 2022-11-26 19:59:09 发布
最新推荐文章于 2022-11-26 19:59:09 发布
阅读量107 收藏
点赞数
分类专栏： js复习区
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiuzi/article/details/114990650
版权

1. 熟悉每条函数上下文this的判定规则

  • 对象.方法() :函数的上下文是这个打点的对象
  • 方法():直接调用对象，上下文是window对象
 var c = 1;
        var obj = {
            a: function () {
                var c = 3;
                return this.b;
            },
            b: function () {
                var c = 4;
                document.write(this.c)
            },
            c: 2
        };
        var obj1 = obj.a();//这里调用了obj.a()，返回了b的这个函数，就相当于obj1就是b的这个函数
        console.log(obj1);
        obj1();
        //输出结果为4，
  • 数组[下标].方法()：数组调用方法，上下文是这个数组
 		var a = 6;
        var obj = {
            a: 5,
            b: 2,
            c: [
                1,
                a,
                function () {
                    document.write(this[1]);
                }
            ]
        }
        obj.c[2]();
        //输出结果为：6。这里返回的是a，不是obj.a所以是6
        //如果有人能给出正确的解释那就再好不过啦
  • (function(){ ... })():立即执行函数（IIFE）调用方法，上下文是window对象
  • setTimeout(obj.fun,200);定时器、延时器调用函数：上下文是window对象
  • DOM元素.onclick = function(){ }:时间处理函数的上下文是绑定事件的window对象

2. call和apply的功能和区别

  • call和apply都可以用来指定函数的上下文，不同的是call只能用于单个输入，而apply要把参数写在数组中
var xiaoming = {
	chinese:80;
	math:95;
	english:93;
}
function sum(b1,b2){
	alert(this.c + this.m + this.e + b1 +b2);
}
sum.call(xiaoming,5,3);
sum.apply(xiaoming,[5,3]);

3. 用new调用函数的四步走（构造函数）

  1. 隐式创建一个空的对象
  2. 将函数的上下文绑定到这个空白对象上
  3. 执行函数
  4. 返回函数的上下文对象

4.什么是类和实例？面向对象编程的意义

  • 类：构造函数，
  • 实例：new出来的个体，
  • 类是实例的抽象化，是蓝图，只有实例化之后才能工作；实例是类的具体化的一个对象，拥有类定义的属性和方法，
  • 面向对象编程的意义：书写一个个的类，让类拥有自治的能力

5.对象的一些方法

  • 对象.hasOwnProperty():检查对象是否真正“自己拥有”某属性或方法
  • '属性' in 对象:检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

【重点内容】

1. prototype和原型链查找

  • prototype是函数的一个属性,汉译为原型，他是一个属性值，默认属性为constructor
  • 构造函数的prototype的属性是它的实例的原型，即：构造函数.prototype.constructor是他本身

2. 继承的实现

  • 实例大点访问它的原型的属性和方法，也叫做“原型链查找”，通过prototype与类建立链接，实现继承

3. 使用面向对象实现小案例

代码附在最后

4. 熟练掌握Math、Date等JS内置对象

  • Math.max() 求最大值
  • Math.max()要求参数必须罗列出来，而不能是数组
  • 如果想用它求数组的最大值可以使用Math.max.apply(null,arr);,apply方法可以指定函数的上下文，并且以数组的形式传入“零散值”当作函数的参数
  • Math.random() : 返回0到1之间的一个随机数

红绿灯案例

  // 定义红绿灯类
        function TrafficLight() {
            // 颜色属性，一开始都是红色
            // 红色1、黄色2、绿色3
            this.color = 1;
            // 调用自己的初始化方法
            this.init();
            // 绑定监听
            this.bindEvent();
        }
        // 初始化方法
        TrafficLight.prototype.init = function() {
            // 创建自己的DOM
            this.dom = document.createElement('img');
            // 设置src属性
            this.dom.src = 'images/' + this.color + '.jpg';
            box.appendChild(this.dom);
        };
        // 绑定监听
        TrafficLight.prototype.bindEvent = function() {
            // 备份上下文，这里的this指的是JS的实例
            var self = this;
            // 当自己的dom被点击的时候
            this.dom.onclick = function () {
                // 当被点击的时候，调用自己的changeColor方法
                self.changeColor();
            };
        }
        // 改变颜色
        TrafficLight.prototype.changeColor = function () {
            // 改变自己的color属性，从而有一种“自治”的感觉，自己管理自己，不干扰别的红绿灯
            this.color ++;
            if (this.color == 4) {
                this.color = 1;
            }
            // 光color属性变化没有用，还要更改自己的dom的src属性
            this.dom.src = 'images/' + this.color + '.jpg';
        };

        // 得到盒子
        var box = document.getElementById('box');


        // 实例化100个
        var count = 100;

        while(count--){
            new TrafficLight();
        }

炫彩小球

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }

        .ball {
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        // 小球类
        function Ball(x, y) {
            // 属性x、y表示的是圆心的坐标
            this.x = x;
            this.y = y;
            // 半径属性
            this.r = 20;
            // 透明度
            this.opacity = 1;
            // 小球背景颜色，从颜色数组中随机选择一个颜色
            this.color = colorArr[parseInt(Math.random() * colorArr.length)];
            // 这个小球的x增量和y的增量，使用do while语句，可以防止dX和dY都是零
            do {
                this.dX = parseInt(Math.random() * 20) - 10;
                this.dY = parseInt(Math.random() * 20) - 10;
            } while (this.dX == 0 && this.dY == 0)

            // 初始化
            this.init();
            // 把自己推入数组，注意，这里的this不是类本身，而是实例
            ballArr.push(this);
        }
        // 初始化方法
        Ball.prototype.init = function () {
            // 创建自己的dom
            this.dom = document.createElement('div');
            this.dom.className = 'ball';
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.left = this.x - this.r + 'px';
            this.dom.style.top = this.y - this.r + 'px';
            this.dom.style.backgroundColor = this.color;
            // 上树
            document.body.appendChild(this.dom);
        };
        // 更新
        Ball.prototype.update = function () {
            // 位置改变
            this.x += this.dX;
            this.y -= this.dY;
            // 半径改变
            this.r += 0.2;
            // 透明度改变
            this.opacity -= 0.01;
            this.dom.style.width = this.r * 2 + 'px';
            this.dom.style.height = this.r * 2 + 'px';
            this.dom.style.left = this.x - this.r + 'px';
            this.dom.style.top = this.y - this.r + 'px';
            this.dom.style.opacity = this.opacity;

            // 当透明度小于0的时候，就需要从数组中删除自己，DOM元素也要删掉自己
            if (this.opacity < 0) {
                // 从数组中删除自己
                for (var i = 0; i < ballArr.length; i++) {
                    if (ballArr[i] == this) {
                        ballArr.splice(i, 1);
                    }
                }
                // 还要删除自己的dom
                document.body.removeChild(this.dom);
            }
        };


        // 把所有的小球实例都放到一个数组中
        var ballArr = [];

        // 初始颜色数组
        var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666', 
    '#CC3399', '#FF6600'];

        // 定时器，负责更新所有的小球实例
        setInterval(function () {
            // 遍历数组，调用调用的update方法
            for (var i = 0; i < ballArr.length; i++) {
                ballArr[i].update();
            }
        }, 20);

        // 鼠标指针的监听
        document.onmousemove = function (e) {
            // 得到鼠标指针的位置
            var x = e.clientX;
            var y = e.clientY;

            new Ball(x, y);
        };
    </script>
</body>

</html>
aiuzi
关注
专栏目录
js 面向对象案例
09-19
js 面向对象案例,这个kdmlkfmdkfmdslfmldsfmldsmfds22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
Javascript面向对象编程.
03-26
在提供的资源中，《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导，而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
深圳Java培训：简单案例来看JS中的面向对象
莫安迪
08-22 170
深圳Java培训：简单案例来看JS中的面向对象 在JS中，一般情况下我们都是直接写函数，直接调用，但是发现JS中也有new关键字，那么new关键字作为创建对象的关键字，给我们的感觉就是在JS中可以定义一个类，然后用new创建对象，那么在JS中如何做呢？我们先看如下案例，下面的案例是写一个简单的喷泉效果的。 window.onload = function(){ // 创建一个画布对象 var c...
JS面向对象编程
weixin_34384557的博客
06-17 133
什么是面向对象编程（OOP）？用对象的思想去写代码，就是面向对象编程。 面向对象编程的特点 抽象：抓住核心问题 封装：只能通过对象来访问方法 继承：从已有对象上继承出新的对象 多态：多对象的不同形态 对象的组成 属性：对象下面的变量叫做对象的属性 方法：对象下面的函数叫做对象的方法 var arr = []; arr.number = 10; //对象下面的变量：叫做对象的属性 ...
js面向对象编程
weixin_34072458的博客
08-16 60
JavaScript的所有数据都可以看成对象，那是不是我们已经在使用面向对象编程了呢？ 当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象，还无法发挥出面向对象编程的威力。 JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念： 类：类是对...
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面对对象编程
xqf的小站
06-29 3013
说到js，很大一部分人会说我很熟悉，在日常的web开发中经常用，那么你的js代码是符合面对对象思路的吗？那你会问我面向过程的js代码有什么不好吗？我的感受是面对对象的js编码更加简洁，减少了混乱，可维护行增强，适合编写富客户端时应用。 好了，首先看看js里如何定义对象: var obj=new Object(); obj.name='josh'; ob
JavaScript 面向对象编程
最新发布
甜心森的博客
11-26 773
JavaScript 面向对象编程总结：封装，JavaScript 构造函数，原型，原型链，继承与 ES6 Class.
JavaScript 进阶 - 第3天
A
11-23 567
JavaScript 进阶 - 第3天 了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程序执行的健壮性 一、面向对象 学习 JavaScript 中基于原型的面向对象编程序的`语法实现，理解面向对象编程的特征。 面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、
JS的面向对象编程
Raccon_的博客
12-17 643
面向对象 构造函数 原型 原型链
现代JavaScript面向对象编程进阶指南
现代JavaScript面向对象编程是提升前端开发者技能的重要一课。JavaScript自诞生以来，经历了漫长的发展，从最初简单的脚本语言，逐渐演变成如今广泛应用于各种复杂应用的强大工具。尽管它在设计之初就被定义为一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值