JS面向对象，设计模式基础

定时器

设置定时器的时候：第一个是回调函数CB、第二个是等待时间、第三个及以后都是到时间后，执行CB，给CB预先传递的实参值。

代码语言：txt复制

setTimeout(function(x,y){
    console.log(x,y);//1秒后执行回调函数，x='zhufeng' y='peixun'
},1000,'zhufeng','peixun')

单例设计模式

对象：把描述同一事物的属性和方法放在一起，实现了分组的效果，避免了全局变量污染；每一个对象都是一个单独的实例（个体/堆内存空间），所以我们把这种方案称之为“单例设计模式”

代码语言：txt复制

//  person1：命名空间 namespace
var person1 = {
    name:'1',
    age:18,
}

代码语言：txt复制

// 高级“单例设计模式”
// 资讯板块
var newsModule = (function () {
    var box = null;
    var query = function query() {};

    // 需求：把这个私有的方法setVal，在其它板块中使用
    var setVal = function setVal() {};

    // 解决1：直接挂载到GO中「弊端：挂载的东西多了，很可能有引发全局变量污染」
    window.setVal = setVal;

    // 解决2：基于返回值，返回一个对象（命名空间），里面包含需要供外部调用的属性和方法即可
    return {
        setVal: setVal,
        query: query
    };
})();

// 换肤板块
var skinModule = (function () {
    var box = null;
    var query = function query() {};
    setVal();

    return {};
})();

// 搜索板块
var searchModule = (function () {
    var query = function query() {};
    newsModule.setVal();

    return {};
})();

THIS

全局的THIS是window对象（GO）；块级私有上下文中没有自己的THIS，遇到的THIS是宿主环境中的；所以我们研究的THIS都是指函数执行，产生的私有上下文中的THIS。

代码语言：txt复制

console.log(this);//window

THIS：函数的执行主体“谁把它执行的”，和函数在哪创建以及在哪执行都没有关系！！以后遇到THIS，想起周老师的一句话：“你以为你以为的就是你以为的”：冷静、冷静、冷静。按照总结的规律去套即可。

规律

给当前元素的某一个事件行为绑定方法，当事件行为触发，浏览器帮我们把绑定的方法执行，此时方法中的this是当前操作的元素本身；
函数执行，看函数前面是否有“点”

- 没有：非严格模式下this=>window；严格模式下（"use strict"）this=>undefined；
- 有：“点”前面是谁，this就是谁。

代码语言：txt复制

const fn = function fn() {
console.log(this);
};
let obj = {
    name: 'OBJ',
    // fn: fn   ES6语法中，如果属性名和属性值的变量名字相同，我们可以像以下这样简写
    fn
};
fn();//this ==> undefined
document.body.onclick = fn;//this==>body
obj.fn();//this ==> obj
document.body.onclick = function () {
    // this ==> body
    fn();//this ==> undefined
};

对于普通回调函数“匿名函数”来说，一般方法中的this都是window，除非在触发回调函数执行的时候，我们自己（或者浏览器）做过一些特殊的处理，更改过其this...

代码语言：txt复制

let obj = {
    name:'zhufeng',
    // 等价于“fn: function () {}”，ES6新语法规范
    fn() {
        //this => obj
        /* let self = this;
        setTimeout(function () {
            // this => window  对于普通回调函数“匿名函数”来说，一般方法中的this都是window，除非在触发回调函数执行的时候，我们自己（或者浏览器）做过一些特殊的处理，更改过其this...
            console.log(this.name);

            console.log(self.name);//获取obj.name
        },1000) */

        setTimeout(() =>{
            console.log(this.name);
        },1000)
    }
}
obj.fn();
好用但不要乱用

箭头函数没有this，函数中出现的this是其上级上下文中的this
构造函数中的this是构造函数执行时创建的实例对象。
call方法能改变this指向

箭头函数 ArrowFunction

代码语言：txt复制

const sum = (x, y) => {
    return x   y;
};
// 如果函数体中只有一句话，而且是return啥啥啥的，则可以省略大括号和return
const sum1 = (x, y) => x   y;

// 如果只有一个形参，可以省略小括号
const sum2 = x => x   10;

箭头函数和普通函数的区别

箭头函数中没有arguments，但是可以使用ES6中的剩余运算符来获取实参集合

- arguments获取的是类数组集合，不能直接使用数组的方法
- params获取的是数组集合，可以直接使用数组的方法

代码语言：txt复制

const fn = (...params) => {
    console.log(params);//[10,20,30]
};
fn(10,20,30);

箭头函数没有自己的this，函数中出现的this是其上级上下文中的this

代码语言：txt复制

let obj = {
    name:'zhufeng',
    fn: () => {
        // 它没有this，this是其上级上下文中的this：window
    }
}
obj.fn();

箭头函数没有prototype属性，所以不能被new执行

面向对象

编程语言：

面向过程 POP ：C语言编程语言之母

面向对象 OPP Object Oriented Programming

- java 编程语言之父
- JavaScript
- PHP/Python/Ruby/Go/C#(ASP.NET)/C /VB...

面向对象是一个非常伟大的编程思想，而JS就是基于这个思想构建出来的一门编程语言，所以在JS中存在：对象、类、实例三个概念！！

对象

JS中一切我们学习和使用的东西都是对象（研究对象）【泛指】“万物皆对象”

类

按照特征特点，把事物进行归纳分类【大类（父类）--> 小类（子类）】；而且类一定会赋予它的每个成员一些公共的属性和方法。

类/构造函数

所有的类（构造函数）都是函数类型的

代码语言：txt复制

console.log(typeof Number); //=>“function”
console.log(typeof Object); //=>“function”
console.log(typeof Fn); //=>“function”

实例

具体的事物，类中的每一个具体的成员；每一个实例都具备一些自己独有的属性和方法（私有特征），也会具备类赋予它的公共属性和方法（公有特征）。

大部分实例都是对象类型的值，但是“原始值类型”的值，从本质上也是自己所属类的实例，例如：1是Number类的实例，那么1也是一个实例，但是它属于原始值中的“number”类型。也就是说，大部分的实例都是对象类型，除了原始值类型的实例外。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞