前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript启示录

JavaScript启示录

作者头像
奋飛
发布2019-08-15 10:17:08
3490
发布2019-08-15 10:17:08
举报
文章被收录于专栏:Super 前端Super 前端

最近阅读了《JavaScript启示录》,一本很薄但是内容却很充实的书籍。展现了准确的JavaScript世界观,涉及对象、属性、复杂值、原始值、作用域、继承、this关键字、head对象等重要概念。

一、JavaScript对象

1. JavaScript预包装了9个原生对象构造函数:

Number()、String()、Boolean()、Object()、Array()、Function()、Date()、RegExp()、Error()

注意:Math是一个静态对象,它不是使用new运算符的构造函数。

2. 字面量语法与使用new操作符的效果相同。但是也有例外:Number()、String()、Boolean()

字符串、数字和布尔值使用字面量值时,只有在该值被视为对象的情况下才会创建实际的复杂对象。换句话说,在使用与构造函数有关的方法或者属性之前,一直使用原始数据类型。在这种情况下,JavaScript会在为字面量创建一个包装器对象,一边将该值视为一个对象。调用方法结束后,JavaScript即抛弃包装器对象,该值返回字面量类型。

3. 原始值:10、true、null、undefined、"123"

原始值的复制操作是真实值复制;比较操作采用值比较。 示例:

代码语言:javascript
复制
var myStr1 = "foo";
var myStr2 = myStr1;
var myStr3 = "foo";
console.log(myStr2 === myStr3);	//结果:true

myStr1 = "test";
console.log(myStr1,myStr2);	//结果:test foo

4. 复杂值:Object()、Array()、Function()、Date()、RegExp()、Error()

复杂值的复制操作是引用的复制,而不是实际值;比较操作采用引用比较。

示例1:

代码语言:javascript
复制
var obj1 = {name : "ligang"};
var obj2 = obj1;
var obj3 = {name : "ligang"};
console.log(obj1 === obj3);		//false

obj1.age = 25;
console.log(obj1 === obj2);		//true
console.log(obj1,obj2);			//Object {name: "ligang", age: 25} Object {name: "ligang", age: 25}

obj1 = {name : "lg"};			//obj1指向新对象,和obj2不再指向同一个对象
console.log(obj1,obj2);			//Object {name: "lg"} Object {name: "ligang", age: 25}

二、Object()、Funcation()

1. 下面几种方式不建议使用,了解可通过此种方式构造对象和函数即可!

(1)

代码语言:javascript
复制
var obj1 = new Object('foo');
var obj2 = new Object(function(){});

(2)

代码语言:javascript
复制
var add = new Function('param1', 'param2', 'return param1 + param2');
var sub = new Function('param1, param2', 'return param1 - param2');

2. 函数

函数的定义有三种不同的方式:构造函数、函数语句和函数表达式。

代码语言:javascript
复制
var addConstructor = new Function('x' ,'y' ,'return x + y');
function addStatement(x, y){ return x + y; }
var addExpression = function(x, y){ return x + y; };

3. 函数实参和形参的length

代码语言:javascript
复制
var myFun = function(x, y, z){
	console.log(myFun.length);				//形参个数:3
	console.log(arguments.callee.length);	//形参个数:3
	console.log(arguments.length);			//实参个数:2
}
myFun(1,2);

三、 在web浏览器中引用head对象

(1)引用赋予head对象的名称:globalObj = window; (2)在全局作用域中使用this关键字:globalObj = this;

四、JavaScript原型

对象的继承,实际是继承原型链!--JavScript原型(你不知道的JavaScript) 对象不包含某属性时,JavaScript将在原型链中进行搜索。

代码语言:javascript
复制
var ary = ['foo','bar'];
ary.join();				//原型链:Array.prototype
ary.toLocalString();	//原型链:Object.prototype		

1. 默认的prototype属性是Object()对象

示例:

代码语言:javascript
复制
var myFun = function(){}
console.log(myFun.prototype);	//firefox:Object {}	chrome:myFun {}
console.log(typeof myFun.prototype);	//Object

2. 原型是一个对象,原型链将每个实例都链接至其构造函数的prototype属性。这意味任何使用new关键字(或原始值创建对象)创建对象时,它都会在“创建的对象实例”和“创建对象的构造函数”的prototype属性之间添加一个隐藏的链接。该链接在实例中被称为__proto__。

示例:

代码语言:javascript
复制
Array.prototype.foo = 'foo';
var ary = [];
ary.__proto__.foo;	//结果:"foo"

注意:__proto__不是官方ECMA标准的一部分;构造函数属性可用于跟踪从对象到它继承的原型对象的链接! 示例:

代码语言:javascript
复制
Array.prototype.bar = 'bar';
var arr = new Array();
console.log(arr.constructor.prototype.bar);		//结果:"bar"
console.log(arr.bar);	//结果:"bar" 	bar对象上没有,从继承的原型上获取

3. 用新对象替换prototype属性会删除默认构造函数属性

示例:

代码语言:javascript
复制
var Foo = function Foo(){};
var FooInstance1 = new Foo();
console.log(FooInstance1.constructor);		//结果:Foo()
Foo.prototype = {};
var FooInstance2 = new Foo();
console.log(FooInstance2.constructor);		//结果:Object()

如果想要替换JavaScript设置的默认prototype属性,应重新连接引用该构造函数的构造函数属性。

示例:

代码语言:javascript
复制
var Bar = function Bar(){};
Bar.prototype = {constructor : Bar };
var BarInstance = new Bar();
console.log(BarInstance.constructor);		//结果:Bar()

4. 用新对象替换prototype属性不会更新以前的实例

示例:

代码语言:javascript
复制
var MyFun = function myFun(){};
MyFun.prototype.x = 1;
var o1 = new MyFun();
MyFun.prototype = { x : 2}
var o2 = new MyFun();
console.log(o1.x);	//结果:1
console.log(o2.x);	//结果:2

Underscore.js:增强及扩展对象 Backbone.js:为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年07月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、JavaScript对象
    • 1. JavaScript预包装了9个原生对象构造函数:
      • 2. 字面量语法与使用new操作符的效果相同。但是也有例外:Number()、String()、Boolean()
        • 3. 原始值:10、true、null、undefined、"123"
          • 4. 复杂值:Object()、Array()、Function()、Date()、RegExp()、Error()
          • 二、Object()、Funcation()
            • 1. 下面几种方式不建议使用,了解可通过此种方式构造对象和函数即可!
              • 2. 函数
                • 3. 函数实参和形参的length
                • 三、 在web浏览器中引用head对象
                • 四、JavaScript原型
                  • 1. 默认的prototype属性是Object()对象
                    • 2. 原型是一个对象,原型链将每个实例都链接至其构造函数的prototype属性。这意味任何使用new关键字(或原始值创建对象)创建对象时,它都会在“创建的对象实例”和“创建对象的构造函数”的prototype属性之间添加一个隐藏的链接。该链接在实例中被称为__proto__。
                      • 3. 用新对象替换prototype属性会删除默认构造函数属性
                        • 4. 用新对象替换prototype属性不会更新以前的实例
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档