Blogger Information
Blog 13
fans 1
comment 0
visits 9902
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js三 作用域与闭包,继承
大宇
Original
604 people have browsed it
  1. 实例演示作用域与闭包; 2. 实例演示类与类的继承;

    作用域

    作用域分为:全局 函数 块(es6新出的)
    全局作用域
    全局作用域 默认的 不可删除的
    由全局对象调用的
    全局对象:如果是在浏览器中运行js,那么全局对象就是window
    var声明的变量自动成为了window的属性
  1. let site = "php.cn";
  2. console.log(site);
函数作用域
  1. function site(){
  2. let domain = "jd.com";
  3. return `${site}[${domain}]`;
  4. //这里要返回一个叫site的变量
  5. // 有一个查询的过程,先在自身的作用域中找一个有没有叫site的
  6. // 如果有 则直接返回它
  7. // 如果函数中没有这个site 则自动到函数的上一级作用域中去查询site
  8. // 全局中正好有一个site,于是就返回了全局的site
  9. // 查询变量的过程,就是一个链式查询的过程 就是作用域链
  10. }

site是声明在函数外部的全局变量
在函数内部可以访问到外部的全局变量

  1. let site = "jd.com";
  2. //私有成员,仅限在当前作用域内访问,外部不可见
块作用域
  1. // {}就是代码块
  2. // if while循环 会用到块作用域 var声明的变量 不支持块作用域 外部可见 会造成变量泄露
  3. {
  4. let a = 1;
  5. const b = "hello";
  6. }
  7. console.log(a, b);
  8. console.log(getSite());

闭包

  1. let c = 100;
  2. function sum(a, b) {
  3. // return a + b;
  4. // 已经产生闭包了
  5. // 函数中的变量按来源有两种类型
  6. // 1:形参:ab 函数自有的
  7. // 2 自由变量 c c并不是函数自由的 是一个外来者、
  8. // 当前的函数可以访问到上一级 / 外部的自由变量;
  9. // 闭包:能够访问自由变量的函数
  10. // 理论上讲 所有函数都是闭包
  11. return a + b + c;
  12. }
  13. console.log(sum(4, 5));
  14. // 通过闭包来访问内部的私有变量
  15. function demo1() {
  16. // 私有变量
  17. let email = "a@qq.com";
  18. // return email; 这样是不好的。
  19. // 通过这个可以对变量进行隐藏 可以做一个权限控制
  20. // 返回一个函数的函数 称之为高阶函数
  21. return function d() {
  22. // 对于这个d函数来说 email就是他的自由变量
  23. return email;
  24. };

继承

  1. // 其实还是没类 只是通过语法糖 把一些细节封装了
  2. // 使用构造函数来模拟类 类是对象的模板
  3. function User(name, email) {
  4. this.name = name;
  5. this.email = email;
  6. // show()输出属性
  7. // this.show = function () {
  8. // return { name: this.name, email: this.email };
  9. // };
  10. }
  11. //构造函数对象的原型对象上的成员,可以被所有实例所共享
  12. User.prototype.show = function () {
  13. return { name: this.name, email: this.email };
  14. };
  15. // 现在show()全在原型 __proto__里面了 实现了代码封装和方法复用
  16. // 创建两个对象 会自动创建两个show()这是没必要的 所以我们可以放到原型上进行方法共享
  17. const user = new User("xxx", "xxx@xx.com");
  18. console.log(user);
  19. console.log(user.show());
  20. const user1 = new User("xxx1", "xxx1@xx.com");
  21. console.log(user1);
  22. console.log(user1.show());
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post