从零开始学_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进行修改。

 

 

 

目录
相关文章
|
9月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
370 19
|
11月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
286 32
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
297 1
JavaScript中的原型 保姆级文章一文搞懂
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
173 4
JavaScript基础知识-函数的参数
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
151 3
|
JavaScript
js中函数的传递参数
js中函数的传递参数
259 0
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
190 1