JS基础-02 （对象、作用域、this、工厂方式创建对象、构造函数、原型、toString()、垃圾回收）

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量54 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51509441/article/details/129205837
版权

1. 对象

	//删除对象
	//delete 对象名；

	//不同报错
	var obj = new Object();
	obj.name="kk";
	console.log(obj.name); // kk
	console.log(obj.hello); // hello undefined;
	console.log(name); // uncaught...name is not defined

undefined是javascript语言中定义的五个原始类中的一个，换句话说，undefined并不是程序报错，而是程序允许的一个值。 ——可理解成，已存在这个对象/变量，但是对象没有被赋值，没有意义。

not defined是javascript在运行我们的javascript代码时，遇到没有定义就用来运算的变量时爆出来的错误。 ——理解成，对象未被声明，不存在此对象/变量。

2. 作用域

2.1 全局作用域

位置：写在script当中的代码，在页面打开是创建，在页面关闭时销毁；
注意：全局作用域中所有声明的变量都会被创建成window对象的属性；
变量提前声明特性：当使用var来声明或者声明并赋值变量时，无论声明位置在何处，声明本身这个语句会在当前script标签中的最顶端被执行，即会在最开始完成声明/创建对象，运行到赋值语句再进行赋值。

	console.log(a); // undefined --已声明，未赋值
	var a=1;
	console.log(a); // 1

函数的提前声明特性：无论函数在何处被声明，函数声明本身会在任何代码前被执行（类似于C++的函数，可写在main函数前，也可以写在后）；但是对于函数表达式来说，由于使用var来声明函数，因此只符合变量提前声明的特性，即会提前创建函数名，但是只有运行到表达式才有具体内容。

	func1();
    function func1(){
    	console.log("1");
    }
    // 结果为1
    
    func2();
    var func2 = function(){
    	console.log("1");
    }
    // 报错，undefined

2.2 函数作用域

在函数执行时创建，执行完毕后销毁，内部与全局作用域相似；
在函数中使用变量时，会先向当前作用域查找，没有则向上一级作用域查找，直到全局作用域，如果全局作用域中没有此变量时报错；
在函数作用域中可以访问到全局作用域的变量，但在全局不能访问函数作用域
在函数定义形参，但是未在外部赋值相当于在函数作用域声明一个变量

	var e=123;
	function fun1(e){ //相当于 var e;
		alert(e); // undefined
	}
	fun1(); // 未给形参赋值
	alert(e); // 123

	var e=123;
	function fun2(e){ //相当于 var e = 123;
		alert(e); // 123
		e = 456; // 对形参e操作，未改变外部的全局变量e
	}
	fun2(123);
	alert(e); // 23

	var e=123;
	function fun3(){ 
		alert(e); // undefined
		var e = 456; // 在函数开始就创建var e，走到这步再赋值，函数运行结束后销毁
	}
	fun3();
	alert(e); // 123

	var e=123;
	function fun4(){ 
		alert(e); // 123 未在函数内部查找到e，往外部查找，找到全部变量e=123
		e = 456; // 对查找到的外部的全局变量e进行操作
	}
	fun4();
	alert(e); // 123

3. this

当调用函数时，解析器会隐式传入一个参数this，this只想一个对象，这个对象被称为函数执行的上下文对象，根据函数调用方法不同，this指向不同的对象。

  1. 当以函数的形式调用时，this永远是全局作用域window；
  2. 当以对象的方法调用时，this是调用这个方法的对象；
  3. 当以构造函数调用时，this就是新创建的对象；
	var name = 1, obj = {name: "kk", sayName: func};
	// sayName: func 使sayName()=func()
    func(){
	    console.log(this);
    }
    console.log(obj1.sayName == func); // True
    
    // 这是以方法的形式调用this；
    obj1.sayName(); // 浏览器信息是 obj = {name: "kk", sayName: func} 控制台输出[object Object] 打印的是obj；
    
    // 这是以函数的方式调用this；
    func(); // 控制台输出:[object Window] 打印的是全局变量window；
    
    /************************************分割************************************/
	var name = "全局", obj1 = {name: "11", sayName: func}, obj2 = {name:"22", sayName: func};
    func(){
	    console.log(name); //注意，没有this，name向外查找，为全局变量name
    }
    func(); // 全局
    obj1.sayName(); // 全局
    obj2.sayName(); // 全局
    
    /************************************分割************************************/
	var name = "全局", obj1 = {name: "11", sayName: func}, obj2 = {name:"22", sayName: func};
    func(){
	    console.log(this.name);
    }
    func(); // 全局
    obj1.sayName(); // 11
    obj2.sayName(); // 22

4. 使用工厂方式创建对象

	function createPerson(name,age,gender){
		//创建一个新的对象
		var obj = new object(); // 对象是Object
		//向对象中添加属性
		obj.name = name;
		obj.age = age;
		obj.gender = gender;
		obj.sayName = function(){
			alert(this.name)
		};
		//将新对象返回
		return obj;
	}
	
	/* 使用工厂方式创建对象的局限/缺点：
	* 使用工厂方法创建的对象，使用的构造函数都是object
	* 所以创建的对象都是object
	* 导致无法区分多种对象
	*/
	
	function createDog(name,age){
		//创建一个新的对象
		var obj = new object(); // 对象是Object
		//向对象中添加属性
		obj.name = name;
		obj.age = age;
		obj.sayHello = function(){
			alert("汪汪..")
		};
		//将新对象返回
		return obj;
	}
	var obj1 = createPerson("白骨精",18,"女");
	var obj2 = createPerson("猪八戒",28,"男");
	var dog = createDog("旺财",3);

5. 构造函数

解决使用工厂方式创建对象的局限/缺点

/*
* 构造函数与普通函数大致相同，习惯名字首字母大写；
* 不同：调用方式不同，构造函数使用new调用，普通函数可以直接调用
* 构造函数的执行流程：
* 	1. 立刻创建新的对象；
* 	2. 将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象；
* 	3. 逐行执行函数中的代码；
* 	4. 将新建对象作为返回值返回；
* 使用同一个构造函数创建的对象，我们称之为一类对象，也将一个构造函数称为一个类
* 	我们将通过一个构造函数创建的对象，称为是该类的实例
*/

	function Person(name, age, gender){
		this.name = name; // 向新建的对象创建name属性和赋值
		this.age = age;
		this.gender = gender;
	}
	function Dog(){
	}
	
	var per = new Person("猪八戒",28,"男");
	console.log(per);// Person对象
	ver dog = new Dog();
	console.log(dog);// Dog对象
	
	
	//instanceof语句来输出对象的类名,检查一个对象是否是一个类的实例，是则返回True，否则False
	console.log(per instanceof Person);// True
	console.log(per instanceof Object);// True
	console.log(dog instanceof Object);// True 所有的对象都是Object的后代

	/************************************分割************************************/
	function Person(name, age, gender){
		this.name = name; 
		this.age = age;
		this.gender = gender;
		/*
		* 创建一个person构建函数
		* 如果在构造函数内部创建方法
		* 则每执行一次，都会创建一个sayName方法
		* 使得每个实例的sayName都唯一，但是功能一样
		* 可优化
		*/
		this.sayName = function(){
			alert("大家好，我是" + this.name);
		};
	};
	var per1 = new Person("孙悟空",25,"男");
	var per2 = new Person("猪八戒",28,"男");
	console.log(per1.sayName == per2.sayName); //false
	
	/************************************分割************************************/
	// 优化
	function Person(name, age, gender){
		this.name = name; 
		this.age = age;
		this.gender = gender;
		this.sayName = fun;	
	};
	// 缺点：将函数定义在全局作用域中污染了全局作用域的命名安全；且不安全
	function fun(){
		alert("大家好，我是" + this.name);
	};
	var per1 = new Person("孙悟空",25,"男");
	var per2 = new Person("猪八戒",28,"男");
	console.log(per1.sayName == per2.sayName); //true

6. 原型

地址和值的关系

			/*
            * 原型Prototype
            * 每创建一个函数，解析器都向函数中添加一个属性prototype
            * 这个属性对应着一个对象，也就是原型对象
            * 
            * 当这个函数以构造函数的形式被调用时
            * 他创造的对象，也就是这个类的实例都会有一个隐含属性__proto__
            * 它的值是（它指向）这个实例的类的原型对象地址
            * 
            * 当我们访问对象的一个属性或者方法时，会先在对象自身中找，如果有则使用，
            * 如果没有，则在该对象的原型对象当中找；
            */

            function MyClass(){

            };

            MyClass.prototype.a = 123;

            // 好处，所有对象都可以应用，但是不污染全局作用域
            MyClass.prototype.sayHello = function(){
                alert("Hello");
            };
            var mc = new MyClass();
            var mc1 = new MyClass();
            
            console.log(mc.__proto__ == MyClass.prototype) // true 
            console.log(mc.a) // 123

            mc1.a = "我是mc1中的a";
            console.log(mc1.a) // 我是mc1中的a
            
            mc.sayHello(); // 弹窗hello
            
            MyClass.prototype.name = "我是原型中的name";
            console.log(mc.name); // 我是原型中的name ，对象中没有，往对象的原型找
            // 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有也会返回true
            console.log("name" in mc); // true

            // 可以是用对象的hasOwnProperty检查对象自身中是否含有该属性
            console.log(mc.hasOwnProperty("name")); // false
            mc.a = 123;
            console.log(mc.hasOwnProperty("a")); // true
            console.log(mc.hasOwnProperty("hasOwnProperty")); // false
            console.log(mc.__proto__.hasOwnProperty("hasOwnProperty")); // false
            
            //去原型的原型中找，直到找到Object对象的原型，一般只有两层++
            console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); // true
            console.log(mc.__proto__.__proto__.__proto__); //null

            //优化构造函数
            function Person(name, age, gender){
                this.name = name; 
                this.age = age;
                this.gender = gender;	
                };
            Person.prototype.sayName = function(){
                alert("大家好，我是" + this.name);
            };
            var per1 = new Person("孙悟空",25,"男");
            var per2 = new Person("猪八戒",28,"男");
            console.log(per1.sayName == per2.sayName); //true
            per1.sayName(); // 弹窗
            per2.sayName(); // 弹窗

7. toString（）

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

            };
            var per1 = new Person("孙悟空",25,"男");
            var per2 = new Person("猪八戒",28,"男");
            
            // 当我们直接在页面打印一个对象时，实际上时输出的对象的toString()方法的返回值
            console.log(per1); // [object Object]
            /*
            per1.toString = function(){
                return "Hi----";
            };
            var result = per1.toString();
            console.log(result); // Hi----
            console.log(per1); // Hi----
            */
            Person.prototype.toString = function(){
                return "Person[name="+this.name+", age="+this.age+", gender="+this.gender+"]";
            };
            var result = per1.toString();
            console.log(result); // Person[name=孙悟空, age=25, gender=男]
            console.log(per1); // Person[name=孙悟空, age=25, gender=男]

8. 垃圾回收

垃圾堆攒会占用内存空间，导致程序速度变慢；
当创建对象之后，对所有这个对象的变量赋值为null时，这个对象就永远无法被操作，这个对象就称为垃圾；
js拥有自动垃圾回收机制，自动将垃圾对象从内存中销毁，不需要也不能手动地回收垃圾，能做要做的只有将不再使用的对象赋值为null；
内存表示

onlyucanconquertime
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript — 原型链与作用域链1
08-08
JavaScript 是一种广泛应用于Web开发的动态编程语言，其核心特性之一就是原型链和作用域链。这两个概念是理解和掌握JavaScript高级特性的基础。 首先，我们来深入探讨一下**作用域链**。作用域决定了变量在何处可以...
different-contexts-isPlainObject-test:测试具有不同全局上下文的构造函数instanceof构造函数问题
05-05
如果对象和构造函数来自不同的全局上下文，比如一个是浏览器环境中的，另一个是Node.js环境中的，那么它们的构造函数和原型链可能无法正确匹配，导致`instanceof`返回错误的结果。这个问题通常出现在以下情况： 1. ...
javaScript-challenges-solutions:用CodeSandbox创建
04-20
4. **原型和继承**：原型链、构造函数、实例化、继承方式（原型链继承、类继承、组合继承、寄生组合继承等）。 5. **异步编程**：回调函数、Promise、async/await、事件循环、定时器。 6. **DOM操作**：选择元素...
对象js
02-13
JavaScript中的对象是编程的核心...以上只是JavaScript对象部分知识点的概述，实际应用中，对象还涉及到更复杂的概念，如模块系统、类、闭包、作用域等。理解并熟练掌握这些概念，对于提升JavaScript编程能力至关重要。
JavaScript基础知识：我正在研究的新开源代码。 涵盖从变量和数据类型到对象和方法的所有内容
02-19
12. **原型（Prototype）**：JavaScript中的对象继承基于原型链，每个对象都有一个`__proto__`属性指向它的构造函数的原型对象，原型对象可以包含共享的属性和方法。 13. **闭包（Closures）**：闭包是函数和其相关...
ES6 新特性有哪些
weixin_64684095的博客
07-06 1104
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
HTML_表单 和 表单案例
secret010的博客
07-05 297
【代码】HTML_表单 和 表单案例。
vue-使用Worker实现多标签页共享一个WebSocket
qq_43548590的博客
07-08 1057
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 416
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 172
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
Webkit简介以及工作流程
最新发布
读心悦
07-10 207
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
JS混淆基本类型和原理
朴拙科技的博客
07-06 714
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 200
vue2、vue3首屏优化,减少白屏时间
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 145
系列文章之：如何在 TypeScript 中导入导出局部类型
逆向案例十一——华强北登录逆向
m0_57265868的博客
07-10 117
发现有三个参数进行了加密，分别是Password,UserName和Deviceld，再登录一次发现最后一个参数是固定的。这个参数没定义，就去页面源码中，找出这个参数。进入后发现折叠的代码，貌似是des(它自己在上面写的），直接复制。我这是格式化后隐藏了。PS：我之前说第三个参数deviceid是固定，其实是错的，它是由这个函数定义的。这是一个获取设备id的函数，每一台设备都不一样，但同一台设备这个参数是固定的。复制代码在pycharm中的js文件中，最后一个参数是加密的密钥。点击登录，找到登录包。
Vue3基础知识：组合式API中的provide和inject,他们作用是什么？如何使用？以及案例演示
我就知道你会来，我们一起进步吧！
07-07 414
Vue3基础知识：组合式API中的provide和inject,他们作用是什么？如何使用？以及案例演示 1.provide和inject相较于父子传递的不同在于provide,inject可以用于跨层级通信（通俗易懂的讲就是可以实现爷孙之间的直接信息传递）。 1.跨层级传递数据 1.在顶层组件通过provide函数提供数据 2.底层组件通过inject函数获取数据
Vue3中生成本地pdf并下载
weixin_62328265的博客
07-07 416
Vue3使用html2pdf.js实现在项目中导出指定的表格数据,包含实现步骤,源码分析,注释讲解等内容
关于echarts中提示框中只能是内容的部分更改
b0303的博客
07-09 157
只为解决展示数据框中提示的问题
党员教育和管理系统的设计与实现
2401_85117741的博客
07-05 1093
Key WordsMysql。
jmu-java-03面向对象基础-构造函数、this与tostring(填空)
03-16
构造函数是一种特殊的方法，用于在创建对象时初始化对象的属性。它的方法名与类名相同，没有返回类型。在构造函数中，可以使用this关键字来引用当前对象，以及调用其他构造函数。而toString方法则是用于将对象转换为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值