从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)-阿里云开发者社区

开发者社区> 零零水> 正文

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

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
将成员函数用作可调用对象
19.18编写一个函数,使用count_if统计在给定的vector中有多少个空string。 #include #include #include #include #include using namespace std; int main() { vector...
484 0
Ubuntu中使用SSHSecure Shell测试Windows与Linux系统间操作及传输问题解决大全
安装SSH服务器 Linux终端下输入sudo apt-get install openssh-server 桥接模式IP设置 inux 与Windows 都是设置为自动获取 IP 地址,然后调到第一次测试一栏开始。
1078 0
shell脚本中常见的一些特殊符号和作用详解
在编写Shell脚本时,我们需要会用到各种各样的特殊符号,通过这些特殊符号可以使我们编写的代码更加简洁和高效,这里给大家汇总下: 1、{} 大括号:用法一:通配符扩展eg: ls my_{finger,toe}s这条命令相当于如下命令的组合:ls my_fingers my_toeseg: m...
969 0
从零开始学 Web 之 JavaScript(一)JavaScript概述
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1902 0
从零开始学 Web 之 JavaScript(二)变量
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1125 0
从零开始学 Web 之 JavaScript(四)数组
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
989 0
Javascript用递归的方式遍历json数组
前言 Javscript语言有很多值得探究和注意的地方,下面我们来看一下用递归的方式遍历JSON对象数组。
1216 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1436 0
javascript 表达式、括号、常用函数和jquery库怎么样实现的分析
(一)javascript表达式 表达式是什么?表达式是对变更进行赋值、更改或计算等操作的语句。它是变量、常量、操作符的综合。根据操作符的不类型,可以分为字符操作表达式、赋值表达式、逻辑表达式、关系表达式、自增自减表达式、位表达式等。
719 0
JavaScript创建对象(二)——构造函数模式
在JavaScript创建对象(一)—— 工厂模式中留下了一个问题,就是创建一个对象怎么判断一个对象的类型。换句话说使用下面这种方式: function createPerson(name, age, job){ var o = new Object(); o.
812 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载