《javascript基础》学习笔记 三

最新推荐文章于 2024-07-13 15:45:29 发布
最新推荐文章于 2024-07-13 15:45:29 发布
阅读量147 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45131334/article/details/108618041
版权

文章目录

前言

学习地址：https://www.bilibili.com/video/BV1ZE411c7yM?p=48

一、基本数据类型和引用数据类型

1、基本数据类型

变量有以下数据类型:
●基本数据类型（值类型）:String字符串、Number数值、Boolean布尔值、Null空值、Undefined未定义。
●引用数据类型（引用类型）:Object对象。

基本数据类型举例:

var  a = 23;
var  b = a;

a++;

console.log(a); //打印结果:24
console.log(b);//打印结果:23

上面的代码中:a和b都是基本数据类型，让b等于a，然后改变a的值之后，发现b的值并没有被改变。

2、引用数据类型举例:

var  obj1 = new object();
obj1.name = 'smyh ';

//  让 obj2等于obj1
var obj2 = obj1;

//修改objl的name属性
obj1.name = 'vae';
console.log(obj1.name）;//打印结果:vae
console.log(obj2.name）;//打印结果:vae

上面的代码中:obj1和obj2都是引用数据类型，让obj2等于obj1，然后修改obj1.name的值之后，发现obj2.name的值也发生了改变。
从上面的例子中，可以反映出，基本数据类型和引用数据类型是有区别的。

3、栈内存和堆内存

JS中，所有的变量都是保存在栈内存中的。

基本数据类型∶

基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。

引用数据类型:
对象是保存到堆内存中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存了对象的内存
地址(对象的引用）。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到
影响。

在这里插入图片描述改变的变量是堆区域的

二、this

1、this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this,this指向的是一个对象，这个对象我们称为函数执行的上下文对象。

【重要】根据函数的调用方式的不同，this会指向不同的对象∶
● 1.以函数的形式调用时，this永远都是window。比如fun();相当于window.fun();
● 2.以方法的形式调用时，this是调用方法的那个对象
● 3.以构造函数的形式调用时，this是新创建的那个对象
● 4.使用call和apply调用时，this是指定的那个对象

针对第1条的举例:

function fun() {
     console.log(this);
     console.log(this.name);
}

var obj1 = {
     name : "smyh"，
     sayName: fun
};

var obj2 = {
name: "vae"，
sayName: fun
};

var name ="全局的name属性";

// 以函数形式调用，this是window
fun();    //可以理解成window.fun ()

打印结果:

window
全局的name属性

上面的举例可以看出，this指向的是window对象，所以this.name指的是全局的name。

第2条的举例:

function fun(){
   console.log(this);
   console.log(this.name);
}

var obj1 = {
name:"smyh"，
sayName: fun
};

var obj2 ={
name: "vae" ,
sayName: fun
};

var name="全局的name属性";

//以方法的形式调用，this是调用方法的对象
obj2.sayName();

打印结果∶

object
vae

上面的举例可以看出，this指向的是对象obj2，所以this.name指的是obj2.name。

    //.前面对象为this指向  无则为指向window
student.like() //this -- > student
fn() //  this --> window
//fn === window.fn
//window.fn()

2、改变this的指向

call/apply :通过call/apply可以使得在调用函数的时候修改this指向;

fn.call(teacher)
student.like.call(teacher,"唱","跳" , "rap")  //有参数传递，依次按顺序传入
fn.apply(teacher)
student.like.apply(teacher,["唱"，'跳', ' rap']) //有参数传递，a-->array数组，参数以数组的形式传入

在这里插入图片描述

bind改变this指向

var teacher = {
name:"老师"
}

var student = {
            name:"学生"，
           like:function(){
                 console.log(this.name+"喜欢打篮球! ")
           }.bind(teacher)
}

var fn = function(){
          console.log(this)
          console.log(this.name+"喜欢打篮球!")
           for(var i = 0; i < arguments . length;i++){
                     console.log(this.name+"喜欢"+arguments[i])
           }
}.bind(student)

//fn()      //  this  --->学生
//window.fn()    //--this--->window
student.like()

在这里插入图片描述

箭头函数中this的指向:
ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定(无论this绑定到什么）。

三、类数组arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数∶
● 1. 函数的上下文对象this
● 2.封装实参的对象 arguments
例如∶

function foo( {
console.log(arguments);
console.log(typeof arguments);
}

foo();

打印结果

Arguments { ... }
object

arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度。

arguments代表的是实参。在调用函数时，我们所传递的实参都会在arguments中保存。arguments只在函数中使用。

1、返回函数实参的个数:arguments.length

arguments.length可以用来获取实参的长度。

举例:

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
console.log(arguments);
console.log(fn.length);       //获取形参的个数 fn(a,b) 即只要a,b两个

console.log(arguments. length);   //获取实参的个数
console.log("------------------")；

打印结果:

Arguments { 0: 2，1: 4，... }
2
2

------------------
Arguments {0: 2，1: 4，2: 6，....}
2
3

------------------
Arguments {0: 2,  1: 4，  2: 6， 3: 8，- }
2
4

2、返回正在执行的函数:arguments.callee

arguments里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数对象。

function fun(） {
      console.log(arguments.ca1lee == fun); // 打印结果为true
}

fun("hello");

在使用函数递归调用时，推荐使用arguments.callee代替函数名本身。

3、arguments可以修改元素

之所以说arguments是伪数组，是因为:arguments可以修改元素，但不能改变数组的长短。举例:

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b){
arguments[0] = 99;  //将实参的第一个数改为99
arguments.push(8);  //此方法不通过，因为无法增加元素
}

四、创建对象的方式

1、字面量形式创建对象

var student = {
     name : "小明",
     age:16，
     school:"尚学堂",
     like: function(){
          console.log(this.name+"喜欢篮球")
    }
}

2、工厂模式创建对象

  function Student(name,age,likename){
              var student = {
                  name : name,
                  age:age,
                  school:"xx高中"，
                  like:function(){
                      console.log(this.name+"喜欢"+likename)
                   }
               }
               return student;
         }
       var s1 = Student("小红",18,"钢琴");
       console.log(s1)
       var s2 = Student("小明",19,"游泳");
       console.log(s2)

3、构造函数创建对象,object浏览器自带的函数对象

//自定义构造函数
function Teacher(name , age , likename){
        this.name = name;
        this.age = age;
        this.like =  function(){
             console.log(this.name+"喜欢"+likename)
         }
             console.log(this)
}
/ /new 创建1个新的对象，将函数内部的this指向新的对象
    var t1 = newTeacher("小黑", "60", "看电影")
    console.log(t1.name)
    console.log(t1.age)
    console.log(t1.like)

在这里插入图片描述

4、class=> es6新出的规范，允许使用class创建对象

class Cat{
//定义构造函数
constructor(name, color,likename) {
   this.name = name;
   this.color = color;
   this.like = function(){
      console.log(this.color+"的"+this.name+"喜欢"+likename)
     }
    }
}
   var c1 = new Cat("波斯猫","白色","毛球")
console.log(c1)

打印结果：
在这里插入图片描述

五、类和实例

类、实例
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。

通过一个构造函数创建的对象，称为该类的实例。

1、instanceof

使用instanceof可以检查一个对象是否为一个类的实例。
语法如下:

对象  instanceof  构造函数

如果是，则返回true;否则返回false。
代码举例:

function Person() { }

function Dog()  { }

var person1 = new Person();

var dog1 = new Dog();

console.log(person1 instanceof Person);//打印结果:true
console.log(dog1 instanceof Person);//打印结果:false
console.log(dog1 instanceof object);//所有的对象都是object的后代。因此，打印结果为:true

根据上方代码中的最后一行，需要补充一点:所有的对象都是Object的后代，因此任何对象instanceofobject的返回结果都是true。

2、json的介绍

JSON : JavaScript Object Notation ( JavaScript对象表示形式）。

JSON和对象字面量的区别:JSON的属性必须用双引号引号引起来，对象字面量可以省略。

json举例:

{
"name" : "zs",
"age" : 18，
"sex" : true,
"sayHi" : function() {
console.log(this.name);
   }
};

注:json里一般放常量、数组、对象等，但很少放function。

另外，对象和json没有长度，json.length的打印结果是undefined。于是乎，自然也就不能用for循环遍历（因为遍历时需要获取长度length )。

json遍历的方法:
json采用for… .in…进行遍历，和数组的遍历方式不同。如下:

<script>
var myjson = {
"name" : "smyhvae" ，
"aaa": 111,
"bbb": 222
};

//json遍历的方法:for. ..in.. .
for ( var key in myJson） {
console.log(key);  //获取键
console.log(myJson[key]); //获取值（第二种属性绑定和获取值的方法）
console.log("------");
}
</script>

打印结果:

name
smyhvae
----------

aaa
111
--------
bbb
222
------

六、原型对象

1、原型的引入

function Person(name，age，gender) {
this.name = name;
this.age = age;
this. gender = gender;
//向对象中添加一个方法
this.sayName = function ( ){
console.log("我是” + this.name);
    }
}

//创建一个person的实例
var per = new Person("孙悟空"，18，"男");
var per2 = new Person("猪八戒”，28，"男");
per.sayName();
per2.sayName();
console.log(per.sayName == per2.sayName);//打印结果为false

分析如下:
上方代码中，我们的sayName方法是写在构造函数Person内部的，然后在两个实例中进行了调用。造成的结果是，**构造函数每执行一次，就会给每个实例创建一个新的sayName方法。**也就是说，每个实例的sayName都是
唯一的。因此，最后一行代码的打印结果为false。

按照上面这种写法，假设创建10000个对象实例，就会创建10000个sayName方法。这种写法肯定是不合适的。

还有一种方式是，将sayName方法在全局作用域中定义:（不建议。原因看注释）

  function Person(name， age， gender) {
      this. name = name;
      this.age = age;
      this. gender = gender;
     //向对象中添加一个方法
       this. sayName = fun;
}

//将sayName方法在全局作用域中定义
/*
*将函数定义在全局作用域，污染了全局作用域的命名空间
* 而且定义在全局作用域中也很不安全
* /

function fun() {
alert("He11o大家好，我是:" + this. name);
};

比较好的方式是,在原型中添加sayName方法:

Person.prototype.sayName = function(){
           alert("He11o大家好，我是:"+this. name);
};

2、原型prototype的概念

认识1:
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的实例对象中都会有一个隐含的属性，指向该构造函数的原型，我们可以通过proto来访问该属性。

代码举例:

//定义构造函数
function Person() {}
var per1 = new Person();
var per2 = new Person();

console.log(Person.prototype);//  打印结果:[object object]

console.log(per1.__proto__ == Person.prototype);//  打印结果:true

上方代码的最后一行:打印结果表明，实例._proto__和构造函数.prototype都指的是原型对象。

认识2∶
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统—添加到构造函数的原型对象中，这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

完整构造函数创建对象的方式

//1、创建构造函数
//2、创建原型对象
//3、设置构造函数原型对象属性protoType
function Teacher(name, age,likename){
    this.name = name;
    this.age = age;
    this.likename = likename
}

//将这一类型都需要用到的方法进行封装,封装到一个对象上，并且将这个对象给到构造函数的prototype属性
var teacherProto = {
like: function(){
      console.log(this.name+"喜欢"+this.likename)
    },
teach:function(){
   console.log("教好学生")
    }
}
Teacher.prototype = teacherProto

认识3∶
使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。
可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。

3、原型链

原型对象也是对象，所以它也有原型，当我们使用或访问一个对象的属性或方法时:

● 它会先在对象自身中寻找，如果有则直接使用;

● 如果没有则会去原型对象中寻找，如果找到则直接使用;

● 如果没有则去原型的原型中寻找，直到找到Object对象的原型。

● Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回null

在这里插入图片描述原型链

4、对象的toString()方法

function Person(name，age，gender) {
this.name = name;
this.age = age;
this.gender = gender;
}

var per1 = new Person( "vae"，26，"男");

console.log("per1 = " + per1);
console.log("per1 = " + per1.toString());

打印结果∶

per1 = [object object]
per1 = [object object]

上面的代码中，我们尝试打印实例per1的内部信息，但是发现，无论是打印per1还是打印
per1.tostring()，结果都是object，分析如下:
● 当我们直接在页面中打印一个对象时，其实是输出了对象的toString()方法的返回值。

● 如果我们希望在打印对象时，不输出[object Object]，可以手动为对象添加一个toString()方法。意思是，重写toString()方法。

重写toString()方法，具体做法如下:

function Person(name，age，gender) {
this.name = name;
this.age = age;
this.gender = gender;
}

//方式— :重写Person原型的toString方法。针对Person的所有实例生效
Person . prototype.tostring = function( i
   return (
     "person [name=" +
     this.name +
     ",age=" +
     this.age +
    ", gender=" +
   this.gender +
   "]"
    );
};

//方式二，仅重写实例 per1的 toString方法。但是这种写法，只对 per1生效，对 per2无效
/*
per1.toString = function( {
return (
  "person[name=" +
   this.name +
   " , age=" +
   this.age +
   " , gender=" +
   this.gender +
   "]"
   );
 };
*/
var per1 = new Person("smyh"，26，"男");

var per2 = new Person("vae"，30，"男");

console.log("per1 = " +per1);
console.log("per2 = " +per2.tostring());

打印结果:
per1 = Person[name=smyh, age=26, gender=男]
per2 = Person[name=vae, age=30, gender=男]

代码分析∶
上面的代码中，仔细看注释。我们重写了Person原型的 toString()，这样的话，可以保证对Person的所有实例生效。

从这个例子，我们可以看出prototype的作用。

呆瓜O_o
关注
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
学习记录-arguments.callee的用法
weixin_43911992的博客
12-02 337
学习记录 arguments.callee的用法 // arguments.callee等于函数本身 var i = 0;// 执行次数 var a=(function(){ i++; console.log("i am running..." + i);//输出执行次数 console.log(arguments.callee);//打印arguments.callee ...
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
Javascript入门学习笔记
weixin_61370021的博客
04-27 4657
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JAVAScript基础学习笔记
2301_78231053的博客
04-09 1388
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 `true` 和 `false`，表示肯定的数据用 `true`，表示否定的数据用 `false`。大部分情况使用 `let` 和 `var` 区别不大，但是 `let` 相较 `var` 更严谨，因此推荐使用 `let`，后期会更进一步介绍二者间的区别。` 代表一段代码的结束，多数情况下可以省略 `;`let` 和 `var` 都是 JavaScript 中的声明变量的关键字，推荐使用 `let` 声明变量！
JS学习笔记（JavaScript基础学习必备）
weixin_44009656的博客
05-01 4494
讲解JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作。 文章目录一、JavaScript 基础1.什么是 JavaScript2.JavaScript 范例3.变量4.数字与运算符5.数组概述6.操作数组7.Null 和 Undefined8.字符串9.转换成字符串10.转换成数值类型11.转换成布尔类型二 、JavaScript 关键特性1.条件2.循环3.函数（参数，函数返回值）4.创建函数5.挑战：制作直角三角形
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 962
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1087
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 8430
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript基础知识学习笔记
weixin_43739821的博客
01-05 1012
引入方式 基础语法 书写语法 变量 数据类型和运算符 函数function 第一种定义格式 第二种定义格式 闭包 对象 基本对象 Array对象 String对象 自定义对象 JSON对象 BOM对象 Window对象 Location对象 DOM对象 DOM介绍 获取DOM对象 操作DOM对象 案例 javascript事件 javascript事件简介 javascript事件绑定 常见javascript事件 javascript事件案例
Javascript基础学习笔记
09-28
基础的js笔记
Javascript基础学习笔记(菜鸟必看篇)
12-04
总的来说，JavaScript的基础学习涵盖了变量、语句、数据类型和函数的使用，这些都是编写有效和可维护的JavaScript代码的基础。作为初学者，理解和掌握这些概念至关重要，因为它们将为你后续的JavaScript编程旅程打下...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
嵌入式学习之电场与漏电检测器.zip
09-24
嵌入式学习资料电子信息与技术
ultralytics_obb_segment.zip
09-24
ultralytics_obb_segment.zip
【PFJSP问题】基于matlab布谷鸟算法CS求解置换流水车间调度问题PFSP【含Matlab源码 7886期】.mp4
最新发布
09-24
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
基于Vue的老年人健康管理平台设计源码
09-24
该项目是基于Vue的老年人健康管理平台设计源码，共计136个文件，其中包括50个JavaScript文件、17个Python源文件、14个Python字节码文件、11个SVG图像文件、8个Markdown文档、5个XML文件、5个JSON配置文件、5个PNG图片文件、5个Vue组件文件以及2个Git忽略文件，实现了前端界面与后端逻辑的完整构建。
前端JavaScript基础学习笔记：李立超老师课程总结
"李立超前端JavaScript基础个人总结笔记，基于B站UP主李立超的视频课程，详细记录了JavaScript基础知识，包括Markdown格式和PDF版本，适合前端初学者配合视频学习，笔记内容涵盖核心概念和代码示例，将持续更新前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值