从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)

简介:   (20)函数的原型 ①Object.create(obj) 根据原型obj创建一个对象; 例如: var obj = {    a: 1}var o1 = Object.create(obj);console.log(obj);console.log(o1); 输出为: Object {a: 1} Object {}   ②使用构造函数方法: 使用构造函

 

(20)函数的原型

①Object.create(obj)

根据原型obj创建一个对象;

例如:

var obj = {
    a: 1
}
var o1 = Object.create(obj);
console.log(obj);
console.log(o1);

输出为:

Object {a: 1}

Object {}

 

②使用构造函数方法:

使用构造函数,通过new来创建一个实例(之前有,这里略)

 

①和②之间的区别:

通过②的继承:

var obj = {
    a: 1
}
var o1 = Object.create(obj);
var o2 = Object.create(o1);
o1.b = 5;
o2.c = 2;
console.log(o1.b);
console.log(o2.b);

o1和o2都有属性b,并且值为5;

 

但是,通过继承来的,则不一样。

var obj = function () {
    a: 1
}
var o1 = function(){}
o1.prototype = new obj();
var o2 = function(){}
o2.prototype = new o1();
o1.b = 5;
o2.c = 2;
console.log(o1.b);
console.log(o2.b);

输出是5和undefined

 

通过查看console属性可以发现,Ojbect.create,其原型链是直接链接到创建时的原型对象的。

例如假设o2没有属性b,那么其值则为o1的属性b的值,假如o1.b的值被更改,那么o2.b的值也会被更改。

如代码:

var obj = {
    a: 1
}
var o1 = Object.create(obj);
var o2 = Object.create(o1);
o1.b = 3;
console.log(o2.b);
o1.b = 5;
console.log(o2.b);

其输出的值分别是3和5

 

 

④hasOwnProperty()

通过Object.create()方法声明的变量,其原型的属性,在自身调用 hasOwnProperty()会提示false

var obj = {
    a: 1
}
var o1 = Object.create(obj);
var o2 = Object.create(o1);
o1.b = 5;
console.log(o2.hasOwnProperty("b"));
o2.b = 2;
console.log(o2.hasOwnProperty("b"));

例如,第一个是true,第二个是false

但需要注意,这种方法无法通过

o2.prototype.b = 5;

来为之设置属性

 

而另一种方法和其的区别在于,可以通过o2.prototype.b = 5;来设置属性,以及继承。

 

 

 

(21)函数的作用域

①静态作用域:(JS使用的是这种)

var x = 1;
function a() {
    console.log(x);
}
function b() {
    var x = 2;
    a();
}
b();

输出结果是1,而不是2。

因为a()定义在window里,而不是在b()里,所以使用的是window中的x,而不是b中的x,如以下代码输出结果便为2:

var x = 1;
function b() {
    var x = 2;
    function a() {
        console.log(x);
    }
    a();
}
b();

 

 

②JS变量的作用域:全局作用域、函数作用域。没有块级作用域(即{}之间声明的变量的作用域);

 

③with方法的临时作用域:

var x = 1;
with ({x: 2}) {
    function a() {
        console.log(x);
    }
    (function () {
        console.log(" " + x);   //输出2
        a() //输出1
    })();
}
console.log(x); //输出1

 

之所以,是因为匿名函数可以理解为在函数内部创建并执行的(类似一个表达式),因此其内部变量的作用域是在with环境创建的临时作用域。(这个作用域,是x=2的作用域)

 

而a函数是声明的,因此其作用域是全局的(因为没有块级作用域,只有全局和函数内部的)。(函数被预解析时,知道其作用域是全局的)

 

由于with环境作用域是临时的,并且声明的是一个对象,因此不会对全局变量x进行修改。

 

 

 

相关文章
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
87 32
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
102 3
springboot解决js前端跨域问题,javascript跨域问题解决
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
71 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
下一篇
oss创建bucket
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等