this、原型、预解析、垃圾回收机制
2022/8/6 23:25:12
本文主要是介绍this、原型、预解析、垃圾回收机制,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
this
this除了用在构造函数里面,还可以用在其他场合
this代表就近调用该属性或者方法的对象。
this返回的总是一个对象。
var person = { name: "张三", decrip: function () { console.log(this); return this.name; } } var personb = { name: "李四" } personb.decrip = person.decrip; console.log(personb.decrip()); //{name: '李四', decrip: ƒ} 李四
绑定this
this默认是动态切换的,有时,需要把this给固定下来
call(object,arguments) 更常用
可以改变函数内部this的指向object,arguments函数的其他参数
如果object是null或者undefined,则不能改变this的指向。
var obj = { name: "test" }; function f1(a) { console.log(this, a); } f1(); //window对象 f1.call(obj, "123"); //{name: 'test'} '123'
apply(object,[arguments])
和call一样,只是传递的参数需要放到数组里面传递
f1.apply({ name: "apply" }, ["123", "abc"]); //{name: 'apply'} '123'
bind() 将函数体内的this绑定到某个对象
返回一个新的函数。
var counter = { count: 0, inc: function () { console.log(this); this.count++; } } var func = counter.inc.bind(counter); //返回一个新的函数 func(); //{count: 0, inc: ƒ} console.log(counter.count); //1
原型
原型就是一个共享对象。
每个函数都有一个prototype属性,指向一个对象(就是一个原型对象)
把属性和方法都定义到原型上,就可以实现多个对象的属性和方法的共享,节省了内存。
function People(name) { this.name = name; } // 把公有的say方法放在People方法的原型对象上面,构造函数产生的实体会自动有该原型。 People.prototype.say = function () { console.log("i can say"); }; var p1 = new People("张三"); var p2 = new People("李四"); console.log(p1, p2); /* People { name: '张三' } { name: "张三" [[Prototype]]: Object say: ƒ() constructor: ƒ People(name) [[Prototype]]: Object } */ /* People { name: '李四' } { name: "李四" [[Prototype]]: Object say: ƒ() constructor: ƒ People(name) [[Prototype]]: Object }*/
原型链
所有的对象都有一个原型对象,可能原型对象还有自己的原型对象,这样一直可以找下去,
null没有任何属性和方法,原型链的尽头就是null。
原型对象的继承
需要通过把父类原型属性赋值给子类原型属性的方式实现原型继承。
Son类的原型对象默认有一个constructor属性,该属性就是该构造函数
本体属性: 构造函数this上的属性
在原型上面的则是原型对象属性。
获取对象的属性是先找本体属性,没有找到再去原型对象找,直到所有原型对象都没有找到,就返回undefined。
function Fater() { this.name = "classp1" } Fater.prototype.move = function () { // 父类的原型对象上添加move方法。 console.log("move"); } function Son() { Fater.call(this); // 不能继承父类的原型对象属性,只能继承本体属性 this.age = 10; } // 需要通过把父类原型属性赋值给子类原型属性的方式实现原型继承。!!! Son.prototype.move = Fater.prototype.move; var son1 = new Son(); console.log(son1);
预解析
会将 变量 和 函数的声明 提取到最前面 以及 形参(提取到函数内部的最前面)
var声明存在变量提升 函数存在函数提升
作用域链:如果当前作用域中没有,则向父级作用域查找,如果还没有,继续向父级作用域,一旦找到全局作用域 如果还没有 就报错
尽量不要用变量或函数提升的特性,还是养成先声明再使用的习惯。
//预解析顺序 var num; function fun() { var num; console.log(num); num = 20; } num = 10; fun(); // 书写顺序 var num = 10; fun(); function fun() { console.log(num); //undefined var num = 20; }
当变量和函数同名 丢变量 保函数
abc() //2 var abc = function () { console.log(1); } function abc() { console.log(2); } abc(); //1
//预解析顺序 var a function a(){ alert(3) } // 书写顺序 alert(a); // function a(){alert(3);} var a = 1; alert(a); //1 function a() { alert(3) }
有多个script标签时,从上到下依次解析并执行第一个script标签,然后下一个,依次类推
在上面script中声明的东西,下面script中都可以使用
在下面script中声明的东西,上面使用都会报错
<script> var a alert(a) // a is not defined function fn() { alert(2) } </script> <script> var a = 1; fn(); //2 </script>
形参
var a = 1 alert(a) //1 function fn(b){ // // 形参类似于 var b=1; 局部作用域 alert(b); //1 b = 2 alert(b) //2 } fn(a)
js的严格模式
一般js编程是用的正常模式,除了正常模式还有一种严格模式,严格模式就是采用更严格的js语法。严格模式是从ES5引入的标准,让js更严谨,为js以后的升级做过渡。
"use strict"; // 要么放在文件开头,也可以放在函数里面,表示函数内部开启严格模式
1.在js脚本开头添加"use strict",表示整个js脚本都开启严格模式。
2.严格模式下,变量必须显示声明。
3.不能删除一个变量或函数
4.严格模式下函数内部没有this,this是undefined,正常模式下this指向的是window
function test() { "use strict"; // 要么放在文件开头,也可以放在函数里面,表示函数内部开启严格模式 var sex = "a1"; var person1 = {}; // delete person1; 不能删除一个变量或函数 // function f1(a,a,){ // console.log(a) // } function p1() { console.log(this); //undefined } p1(); }
垃圾回收机制
js的垃圾回收(变量在内存里面的销毁):js自动有一套垃圾回收机制。
js变量不使用的时候,使用完成后会自动销毁。 主要是局部变量
全局变量则是应用关闭才会销毁。
function f6() { var name = "a1"; // name变量会在函数调用完成以后自动从内存释放。 } f6(); f6 = undefined; // 可以用undefined或者null手动释放全局变量。
这篇关于this、原型、预解析、垃圾回收机制的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?