自学js第十天:JS对象和this和执行上下文

最新推荐文章于 2023-05-11 17:49:03 发布

AKA俄语人Лев

最新推荐文章于 2023-05-11 17:49:03 发布

阅读量564

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116434196

版权

本文详述JavaScript中的对象创建、this指向及执行上下文的概念。讲解了对象的字面量、构造函数、new关键字的应用，强调了对象在存储和管理数据中的作用。同时探讨了instanceof、构造函数、this的指向规则，并解析了执行上下文的创建、执行和回收阶段，以及变量提升和this的确定。

摘要由CSDN通过智能技术生成

复习数组基础方法作用域函数小测试:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复习数组基础方法 作用域 函数 小测试</title>
</head>

<body>
  <script>
    /*
      有两个数组 数组A 数组B
      数组A为固定初始数组 ['jojo','okko','张三','秃头','帅小伙']
      数组B为用户动态选择添加的值 [] ... 不确定
      需要 将数组B中前N 位添加到 数组A中 N = 7 - 数组A.length
      数组A 有限制长度 7

      例如 A:  ['jojo','okko','张三','秃头','帅小伙']
          B: ['你好','小脑斧','大西瓜','长得帅']
         输出: ['jojo','okko','张三','秃头','帅小伙','你好','小脑斧'];
    */

    function fillArray(arrA, arrB) {
    
      var maxLen = 7;
      var arrALen = arrA.length;
      return arrA.concat(arrB.slice(0, maxLen - arrALen));
    }
    console.log(fillArray(['jojo', 'okko', '张三', '秃头', '帅小伙'], ['你好', '小脑斧', '大西瓜', '长得帅']
    ));



    /*
      函数 作用域

    */
    // console.log(x); // undefined
    // f1();
    // var x = 0;
    // function f1() {
    
    //   f2();
    //   var x = 10;
    //   function f2() {
    
    //     x = 20;
    //     console.log(x); // 20
    //   }
    // }
    // console.log(x); //0

    // console.log(a); //函数
    // function a() {
    
    //   a = 20;
    // }
    // a();
    // console.log(a); //20
    // var a = 30;
    // console.log(a); // 30



    function f1() {
    
      var arr = [];
      //i 
      for (var i = 0; i < 10; i++) {
     //0 1
        arr.push(function () {
    // 0 1
          return i; //0 1
        });
        console.log(arr[i]());//
      }
      // console.log(i); //10
      return arr;
    }

    console.log(f1()[0]()); //10


    // function f1() {
    
    //   var x = 10; //
    //   return function () {
    
    //     return x;
    //   }
    // }
    // f1()(); //10



  </script>
</body>

</html>

JS之对象 Object:

① obj.属性如果是字面量对象则可以直接obj.属性创建对象属性出来.

②如果是构造函数下的对象, 则obj.属性如果内部构造函数没有该属性,则返回undefined.

console.log(obj.a);  //直接把a当成键名key了,然后去查询并输出对应的value,没有则返回undefined.

console.log(obj['a']); //这里和上一行一样是指: 查询对象中的key属性a的value 

console.log(obj[a]); //而这里是指: 找a变量的的字面值作为键名key,然后再key输出对应的value,如果a变量未声明则报错,一般用于对象(for key in obj)遍历时使用.特定有变量key的模板

一.对象通俗概念:

什么是Object对象? 咱们要说的对象可不是 女朋友, 在这个世界上任何具体事物都可以看做 对象
因为他们都有自己的特征、行为。

车子 手机 猫 是对象吗？ 
这些都是整体的抽象一类class事物,
只有具体特征和行为的事物才是对象 , 比如猫抽象类,  我家的小黄猫具体对象。

小黄猫
	特征：
        颜色：黄色
        年龄：1岁 
        体重：5kg
        最爱：小鱼干
        名字: 橘子
    行为：
    	吃饭 睡觉 伸懒腰 喵喵喵

在这里插入图片描述

2.JavaScript是一门基于对象的语言。

javascript中我们称Object为对象对象的概念也分广义和狭义：
广义对象上:javascript中处处是对象
狭义对象上:指的是我们通过{ }字面量创建的对象。

JavaScript的对象是无序属性的集合。
	①其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。

    
   ②对象的行为和特征
	特征---属性
	行为---方法
 
 事物的特征在对象中用"各种属性"来表示.
 事物的行为在对象中用"函数方法"来表示。

3.对象属性和对象方法:

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征
如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的动作行为和功能

在这里插入图片描述

二.JS的字面量

字面量(literal)是用于表达源代码中一个固定值的表示法(notation).

几乎所有计算机编程语言都具有对基本值的字面量表示, 诸如: 整数, 浮点数以及字符串; 而有很多也对布尔类型和字符类型的值也支持字面量表示; 还有一些甚至对枚举类型的元素以及像数组, 记录和对象等复合类型的值也支持字面量表示法.

字面量（literal），在高级语言中我们可以通过更直观更高效的方式直接赋予变量具体 值 , 当需要使用值得时候才会去根据值得类型和内容进行包装解析; 先存储后解释。

javascript中字面量包括

1. 整数类型字面量（number Literal）

var num1 = 123; 
var num2 = 1.1;

2. 字符串字面量（string Literal）

var str = '张晓华'; //张晓华 就是字符串文字字面量
var str = '123'; //张晓华 就是字符串数字字面量

3.引用类型数组字面量(array literal)

var arr = [1,2,3,4,5]; //[1,2,3,4,5] 就是数组字面量

4.引用类型对象字面量是一个花括号(object literal) 通过var obj = { }

var obj = {
   
    name:'橘子',
    age: 1,
    favorite: '小鱼干'
}

/*
{
    name:'橘子',
    age: 1,
    favorite: '小鱼干'
}

就是对象字面量


*/

5.函数字面量(function literal) ,(即匿名函数表达式)

var fn = function(){
   
    alert('你好');
}

/*
 function(){
    alert('你好');
}
就是函数var fn 的字面量

*/

三.javascript中的对象分类.

JavaScript中的对象分为3种：

1.内置对象、

2.浏览器对象(DOM 和 BOM)、

3.自定义对象.

javascript是基于对象的语言, javascript不可以自己创建一个原生对象,只能访问内置对象属性和调用已有的内置对象方法。但是可以通过基于Object创建狭义概念上的对象。

//JS的内置对象类,对象类内有各种各样的方法.
Number //数字
Boolean // 布尔
String //字符串
Object //对象,老祖宗类
Function //函数引用类型
Array  //数组
Date //时间
Math //数学
Null //空 
RegExp //正则表达式的对象

四.对象创建方式(字面量对象和 new实例化对象)

(js对象都是通过key : value冒号+键值对赋值的)

创建对象有三种基础方式:

1.对象字面量:

2.原生单个对象实例化: ( 升级:工厂模式对象)

3.自定义构造函数:

静态的字面量去创造对象. var 变量 = { 字面量key:valule }

var myCat = {
   
    name: '橘子',//特征
    color: 'orange',//特征
    age: 1,               //特征
    favorite: '小鱼干',  //特征
    speak: function (){
     //行为
    console.log('喵~~喵~喵~~~');
    }
 }
console.log(myCat);
    //PS:很神奇 ,只要引用修改并且赋值了,哪怕是未定义的属性或行为都算是创建为对象的属性.
myCat.sex = true; //引用.创建属性值
myCat.age = 3; //引用.修改属性值
myCat.speak(); //引用.调用行为方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RJ8TkWoR-1620235668986)(C:\Users\tuyue\AppData\Local\Temp\1615950076523.png)]

动态原生单个对象实例化 (一个一个单独new , 几个对象就new几次 )

//格式:var 变量 = new Object内置对象()
var myCat = new Object();
myCat.name = '橘子';  //和java一模一样的访问(引用.的方式)
myCat.color = 'orange';
myCat.age = 1;
myCat.favorite = '小鱼干';
myCat.speak = function(){
   
 console.log('喵~~喵~喵~~~');}

工厂函数创建对象 (封装进一个fn函数工厂内, 调用一次函数就new一个Obj对象,减少代码重复性):

(升级版的原生实例化对象 ,调用一次就进入函数工厂new一个,代码效率高,当然只new一个原生即可)

//案例1:关于createCa函数类的封装
function createCat(name,age,color){
   
    var cat = new Object();
    cat.name = name;
    cat.color = color;
    cat.age = age;
    cat.favorite = '小鱼干';
    cat.speak = function(){
   
    console.log('喵~~喵~喵~~~');
    }
    return cat;  //切结写完要return 返回引用 ,返回cat引用变量,即返回new Object();
}

var myCat = createCat('橘子',1,'orange'); //通过形参和实参对应来赋值
var myCat1 = createCat('小黑',1,'black');
var myCat2 = createCat('小黑',1,'black');


//案例2; 关于 createstudent函数类的封装
function createStudent(name, age, sex) {
   
      var obj = new Object(); //new 构造函数();
      obj.name = name;
      obj.age = age;
      obj.sex = sex;
      obj.speak = function () {
   
        console.log('我要学习,学习使我快乐,学习让我成长!');
      }
      return obj;
    }
    
var stu1 = createStudent('小明', 99, 0,);
 stu1.age =10; //修改
var stu2 = createStudent('小里', 99, 0,);
var stu3 = createStudent('小王', 99, 0,);

console.log(typeof stu1); //object ,类型还是obj,无法通过typeof判断具体对象,全部都是object类型
console.log(stu3 instanceof  Object); //true,只能通过instanceof亲子鉴定布尔,来判断对象.

construct构造函数创建对象:(给自定义对象构造函数 + this + new实例化一起搭配才行 ,最常用)
1.javascript 中没有类用javascript 做面向对象开发OOP 是用js原型来模拟构造函数

2.构造函数名首字母是大写的名词 (模拟构造函数,大写的方法名(类似类名))
```
  构造函数 模具 工厂 孵化器
  1. 本质上还 是fn函数 只是构造函数名字是首字母大写, 而普通函数是小写的函数名.
  2. 构造函数实例化需要 new 关键字
  3. 函数体内使用this关键字，代表所要生成的对象实例。
```

//无参构造函数写法:
function fun() {
    
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 


function Cat(name,age,color,favorite){
    //有参构造
    this