js基础复习

最新推荐文章于 2024-04-04 01:34:39 发布
最新推荐文章于 2024-04-04 01:34:39 发布
阅读量147 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69892739/article/details/128159635
版权

目录

文章目录

前言

一、什么是对象？

1. 对象创建的几种方式

二、什么是原型以及原型链

1.原型

2.原型链

三、继承的几种方式？

1.原型链继承及它的弊端

2.借用构造函数继承

借用构造函数继承存在的弊端??

3.寄生组合式继承

4.class类继承

四、this指向问题？

五、call（）、apply（）、bind（）的区别？

六、对作用域链的理解？

七、new操作运算符做了什么（作用）？

文章目录

  • 前言
  • 一、什么是对象？
    • 1. 对象创建的几种方式？
  • 二、什么是原型以及原型链？
    • 1.原型
    • 2.原型链
  • 三、继承的几种方式
    • 1. 原型链继承
    • 2.借用构造函数继承
    • 3.寄生组合式继承
    • 4.class类继承
  • 四、this指向问题？
  • 五、call（）、apply（）、bind（）的区别？
  • 六、对作用域链的理解？
  • 七、new操作运算符做了什么（作用）？

前言

学习React之前来先了解一下js的基础知识！

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是对象？

对象是由属性和方法组成的。面向对象的三大特性是封装，继承，多态

  • 属性：是事物的特征，在对象中用属性来表示。
  • 方法：是事物的行为，在对象中用方法来表示。

例如：如果值是一个函数，那么我们称之为是对象的方法；

           如果值是一个非函数类型，那么我们称之为属性。

1. 对象创建的几种方式

     1-1、字面量方式创建

      对象字面量是由若干键值对组成的映射表，键值对中间用冒号分隔，键值对之间用逗号分开，整个映射表用花括号括起来。

      字面量创建的对象类型为：object、（js中内置的全局的构造函数、Array、String、Number、Function）

const obj = {} //对象都是实例化（类）得来的

console.log(obj);

1-2、早期通过new Object的方式创建

        使用new关键字，创建一个Object的实例对象，然后再为其添加属性和方法。

        

const obj1=new Object()
console.log(obj1);

1-3、工厂模式

//工厂模式
function createStudentObj(name,cls){
    return {
        name,
        cls,
        study(){
            console.log(`我是${this.name},我能够快乐的学习`);
        } 
    }
}
const zs=createStudentObj('zs',18)
const lisi=createStudentObj('lisi',18)
const wangwu=createStudentObj('wangwu',18)


//问题1:使用工厂模式创建的对象 类型一致 都是Object类型

console.log(zs,lisi,wangwu);


//问题2:相同的逻辑代码（函数）被保存到了不同的内存空间中 导致内存空间的一个浪费
zs.study=123
console.log(lisi.study);

  

 

1-4、构造函数

        构造函数特点：首字母大写 ，被new关键字调用的

 //构造函数的形式
   function Person(name,age){
        this.name=name
        this.age=age
        this.eat=function(){
            console.log('eat');
        }
   }
   //将eat方法 放置在函数的原型对象
   Person.prototype.eat=function(){
        console.log('eat');
   }

   const p1=new Person('zs',18)
   const p2=new Person('lisi',18)
   const p3=new Person('wangwu',18)

   console.log(p1,p2,p3);

二、什么是原型以及原型链

1.原型

原型分为隐式原型和显示原型。

显示原型：每个构造函数身上都有一个prototype属性(显示原型属性)，对应的值是原型对象object（是由new object所产生的）。

隐式原型：属性是__proto__，在浏览器显示[[prototype]]，每一个实例对象身上都有一个__proto__属性。

原型对象的作用：用来存放一些属性和方法来供实例对象所调用。

2.原型链

当我们访问对象的某个属性时，会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，如果还没找到则继续向上级对象的原型中查找，直到找到顶层Object对象，如果没有找到返回undefined，这种通过对象的__proto__隐式原型查找属性的链条关系就称之为原型链。

原型链的最顶端是：Object.prototype，它的隐式原型属性值是null。

三、继承的几种方式？

1.原型链继承及它的弊端

    // 一个父类对象  (公共属性和方法)
    function Person(name, age) {
        this.name = "fxh"
        this.age = 20
        this.friends = []
    }

    Person.prototype.singing = function () {
        console.log(this.name + "--singing--");
    }
    let p = new Person()
    console.log(p);

    // 一个子类对象 (特有的属性和方法)
    function Student() {
        this.sno = 147852
    }

    Student.prototype = p
    let stu = new Student()   

    console.log(stu);   // 不会显示它的属性和方法 , 实际存在
    // 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
    console.log(stu.name);


    //2.第二个弊端: 创建出来两个stu的对象
    var stu1 = new Student()
    var stu2 = new Student()

    // 直接修改对象上的属性, 是给本对象添加了一个新属性
    stu1.name = "zzz"
    console.log(stu1.name);
    console.log(stu2.name);

    // 获取引用, 修改引用中的值, 会相互影响!!!!
    stu1.friends.push("kobe")
    console.log("111",stu1);
    console.log("222",stu2);
    
    // 3.第三个弊端: 在前面实现类的过程中都没有传递参数
    var stu3 = new Student("lilei", 112)

    console.log(stu3);

2.借用构造函数继承

  function Person(name,age,friends){
        this.name = name
        this.age = age
        this.friends = friends
    }
    Person.prototype.singing = function(){
        console.log(this.name+"singing");
    }
    let p = new Person()

    function Student(name,age,friends,sno){
        Person.apply(this,[name,age,friends])
        this.sno = sno
    }
    Student.prototype = p
    var stu = new Student("fxh",20,["xxx"],123456)
    console.log(stu);

借用构造函数继承存在的弊端??

无论在什么情况下,都会调用两次父类构造函数,所有的子类实例对象上会拥有两份父类的属性,一份是自己本身的,另一份是在子类对应的原型对象中

3.寄生组合式继承

// 父类 公有属性和方法
function Person(name,age,friends){
    this.name = name
    this.age = age
    this.friends = friends
 }
 Person.prototype.singing = function(){
     console.log(this.name+"singing");
 }
// 子类 特有属性和方法
function Student(name,age,friends,sno){
     Person.call(this,name,age,friends)
     this.sno = sno
}
// 让子类的原型对象 == 新创建的一个对象 并且 新创建的对象的原型是父类的原型
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
var stu = new Student("范筱涵",20,["xxx"],123456)
console.log(stu);

4.class类继承

class Person{
	constructor(name,age){
		this.name = name
		this.age = age
	}
	eat(){
		console.log('这是父类方法')
	}
}

class Student{
	constructor(name,age,sno){
		super(name,age)  //super关键字实现继承
	}
	this.sno = sno
}

四、this指向问题？

  • 全局作用域 this 指向 window

  • 函数中的 this 指向调用者

  • 箭头函数的 this 一般指向定义时所在的作用域

  • 事件中 this 指向触发这个事件的对象(dom)

"use strict"   // ES6转ES5时  会默认开启严格模式  是undefined
	在浏览器中 全局作用域中的this指向的式window
	console.log(this);//window
	function test() {
        console.log(this);
    }
    test()  // 默认绑定 指向window

    const obj = {
        name: "张三",
        fn() {
            console.log(this);
        }
    }
    obj.fn()   // 隐式绑定
    obj.fn.call({})   // 隐式丢失(显示绑定)
    test.apply(obj)    // 是obj apply call bind 是改变this指向
    obj.fn.apply('abc') //this ->abc

五、call（）、apply（）、bind（）的区别？

apply 方法：apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。

call方法：call方法的第一个参数也是this的指向，后面传入的是一个参数列表（注意和apply传参的区别）。当一个参数为null或undefined的时候，表示指向window（在浏览器中），和apply一样，call也只是临时改变一次this指向，并立即执行。

bind方法：bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

  1. 三者都是用来改变this指向的。

  2. 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。

  3. call和apply在调用时会执行，而bind在调用时会返回一个新的函数，需要进行手动调用。

  4. 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。

  5. bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

六、对作用域链的理解？

  • 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

  • 简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

七、new操作运算符做了什么（作用）？

  1. 创建一个空对象，并且this变量引用该对象。

  2. 该对象的隐式原型属性指向该函数的原型对象，同时还继承了该函数的原型。

  3. 该对象的属性和方法被加入到this引用的对象中。

  4. 新创建的对象由this所引用，并且最后隐式的返回this。

夏兮颜☆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js基础知识复习看这个就够了~
01-08
js的基础知识数组字符串正则表达式 数组 增删 push 向数组的末尾添加一个或者多个数据， 返回新数组长度 var len = arr.push(1,2,3); pop 删除数组最后一项返回该项的值 var lastValue = arr.pop(); unshift 向数组的首位添加一个或者多个数据， 返回新数组长度 var len = arr.unshift(1,2,3); shift 删除数组第一项返回该项的值 var firstValue = arr.shift(); 连接 var newArr = arr1.concat(arr2); 反转 var newArr=arr.rev
JS 基础知识 复习 归纳总结
04-09 111
变量 // 全局变量 var sum; //变量声明 sum = 10; //变量赋值 document.title='1111' function fn(){ //局部变量 var sum=0; } console.log(sum) /*undefined*/ 变量和函...
js复习，最全指南
最新发布
2301_76232361的博客
04-04 398
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
JS基础复习
君兮的博客
09-08 190
JavaScript JavaScrip由三部分组成： 一、javascript基本内容： 1、js的运行环境 浏览器 （前端语言） node.js （后端语言） 2、js的组成 ECMAScript 【基础语法】 DOM 【文档对象模型】 浏览器为js提供的操作 html 的API BOM 【浏览器对象模型】 浏览器为js提供的操作浏览器的API 3、js的特点 1）既可以作为前端脚本语言，还可以作为后台语言（取决于它运行的平台） 2）解释型语言，不需要编译
JS基础复习.xmind
04-15
JS基础复习.xmind
js代码-js基础复习
07-16
js代码-js基础复习
JavaScript基础复习大纲
09-10
JavaScript基础复习大纲DAY1,很好，很强大，还有下半部分
web编程基础复习提纲
08-06
HTML+CSS+JavaScript期末复习资料、幕布笔记，考点梳理，适合期末复习应对考试用。
JS基础知识复习（持续更新）
qq_66193208的博客
04-20 1933
前端必备技能JavaScript知识点汇总（根据哔哩哔哩视频学习总结的 纯手打），建议在学完html+css后进行学习，这部分代码量不是很多，如之前学过python、java语言等，在js中也会发现很多相通的东西。这部分是js中比较基础的东西，学过其他语言的可以快速过一下。后续也会更新高阶部分。
js基础（简单复习）
alightman的博客
10-08 275
①.复习Js基础 1.变量，用于存储数据 声明以及赋值 2.数据类型分为简单数据类型和复杂数据类型 简单：number,string,boolean,undefined,null 复杂：Object function Array Date 基本包装类型：Number,String,Boolean 3.数据类型的转换 转换成字符串类型，String()/toStri
js基础知识复习
stray82的博客
03-15 263
JavaScript 数组 下面的代码创建名为 cars 的数组： var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; 或者 (condensed array): var cars=new Array("Audi","BMW","Volvo"); 或者 (literal array
JS基础复习（自我总结01）
从入门到放弃
01-31 317
首先介绍一下JavaScript书写位置 他有两种书写的方式第一种呢是内嵌式写法 在html页面内部设置 <script> function (){ console.log('在这里输入CS') } </script> //该标签可以放到 head 标签中或者 body 标签中 第二种是外联式的写法 外联是也是最推荐使用的一中方法 ...
js基础复习笔记
sumisu666的博客
01-26 486
---于2021/1/26整理 js基础复习笔记 1.变量及数据类型2.运算符3.函数函数声明与创建函数的2种定义方式调用函数的3种方法回调函数2种匿名函数内置功能函数4.数组数组概念数组的创建方式数组的修改 以及 for in 和 for of对象的创建访问对象修改、删除对象属性5.获取元素及事件6.元素内容的操作删除内容元素内容的移动元素内容的交换7.元素样式的操作操作元素尺寸...
JavaScript从入门到精通复习资料大全（基础篇）
张璟冰的博客
07-01 5919
JavaScript从入门到精通复习一、JavaScript中的常量和变量1、常量：就是程序运行过程中，保持不变的数据。2、变量：是程序中一个已经命名的存储单元。3、 变量的赋值二：JavaScript中的运算符1、算术运算符2、比较运算符3、赋值运算符4、字符串运算符5、 逻辑运算符6、条件运算符7、其他运算符8、运算符的优先级三：JavaScript中的表达式四：数据类型的转换规则五：流程控制1、赋值语句2、条件判断语句2.1、简单if语句2.2、if..else语句2.3、if..elseif 语句
web前端开发期末复习
12-14
3. 复习JavaScript基础知识，包括变量、数据类型、运算符、流程控制、函数等内容。可以参考其他教材或者网上的相关资源。 4. 练习实战项目，例如制作一个简单的网页或者实现一个小功能，加深对前端知识的理解和应用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏兮颜☆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值