全局对象window
在说全局对象之前, 我们先讲一个小知识点
JS规定, 如果首行是大括号, 一律解释为代码块
{foo: 123}
如果要解释为表达式(对象), 则必须在大括号前加圆括号
({foo: 123})
global(浏览器里就是window)
window的属性大致分为两类, 一类是ECMAScript规程, 一类是浏览器环境私有的, 如
| ECMAScript规定 | 私有(chrome/firefox等) |
|---|---|
| parseInt | alert |
| parseFloat | prompt |
| Nmuber | comfirm |
| String | console |
| Boolean | document |
| setTimeout | history |
window有哪些属性和方法可以查看mdn
这里给大家说一点需要注意的地方, 我们用字面量的方式声明数字和用new Number()声明的数字是不一样的, 用new Number()声明的数字是一个对象
let n1 = 1
let n2 = new Number(1)
n1是一个简单类型, n2实际上是一个对象
当我们用n1.toString()时, js会先把n1临时转换成Number对象, 然后使用对象的toString()方法, 转换之后临时对象Number即销毁
下面的代码就很明白说明这个过程了
let n = 1
n.name = 'Adam'
n.name //undefined
上面的代码, 我们给n一个name属性, 这是js解释器会把n转换成一个Number对象, 然后给这个对象赋值'Adam', 然后这个对象就销毁了
当我们调用n.name时,js解释器会再创造一个新的Number对象, 这个对象并没有name属性, 所以是undefined
这个对也String()等也同样适用
几个有用的string类型API
trim()去掉字符串前后的空格
' username '.trim()
'uername'
concat()连接两个字符串，返回一个新字符串
let s1 = 'Hello'
let s2 = 'World'
s1.concat(s2)
'HelloWorld'
slice(index, length)截取字符串, 返回一个新字符串
let s1 = 'Hello'
s1.slice(0,2)
'He'
replace(oldLetter, newLetter)替换第一个匹配字符串, 并替换成新字符, 返回一个新字符串
let s1 = 'Hello'
s1.replace('l', 'o')
'Heolo'
构造函数
JS使用构造函数作为对象的模版, 构造函数在不用new时, 就是普通函数
let b = new Vehicle() 和 let b = new Vehicle 等价
不使用new时, 构造函数变成就变成普通函数, this这时代表全局对象
let Vehicle = function () {
this.price = 1000
}
let v = Vehicle()
v //undefined
price //1000
new 做了什么
- 创建一个空对象, 作为将要返回的对象实例
- 将这个空对象的proto, 指向构造函数的prototype属性
- 将空对象赋值给函数内部this关键字
- 开始执行构造函数内部的代码
- 返回构造函数
- 如果构造函数内部有return语句, 而且return一个对象, new命令会直接返回该对象
this 关键字
全局环境
function fn() {
console.log(this === window)
}
fn() //true
构造函数
这个就是上面提到的new
对象的方法
let obj = {
foo: function() {
console.log(this)
}
}
obj.foo() //obj
下面情况, 会改变this指向
(obj.foo = obj.foo)() //window
(false || obj.foo)() //window
(1, obj.foo)() //window
第一个等价于
(obj.foo = function(){console.log(this)})()
(function() {console.log(this)})()
第二个等价于
(false || function() {console.log(this)})()
第三个等价于
(1, funciton() {console.log(this)})()
如果this所在的方法不在第一层, this就只是指向当前一层对象, 不会继承更上层
let a = {
p: 'Hello',
b: {
m: function() {
console.log(this.p)
}
}
}
a.b.m() //undefined
所以请使用call apply bind方法强制绑定this, 就不会乱了
关于this的用法还有另一篇文章中也提到了, 有兴趣的可以看一看
原型
我们声明一个函数
function fn(){
}
对于每一个声明的函数, 都会有一个prototype属性, 有且只有函数才有prototype属性
所以fn也会有一个fn.prototype的属性
当我们对函数使用new操作符时, 就会生成一个实例对象, fn就是这个实例对象的构造函数
实例对象就会自动生成一个__proto__的属性,指向他的构造函数的prototype属性, 所以当我们new fn()时, new出来的实例会自动有一个__proto__属性指向fn.prototype
这个prototype属性, 我们就给它取个名字, 叫原型
我们给fn函数new一个实例对象
function fn() {}
let obj = new fn()
obj.__proto__ === fn.prototype // true
上面的话总结起来, 就是下面这个图
我们继续延续上面的说下去,其实prototype属性, 仍然有__proto__属性， 所有函数的prototype属性最终都会指向Object.prototype
fn.prototype.__proto__ = Object,prototype
因为Object.prototype中包含toString等方法, 这就是为什么所有对象都能调用toString等方法的原因
我们可以发散一下
let string = new String('aaa')
string.__proto__ === String.prototype //true
string.__proto__.__proto__ === Object.prototype //true
我们继续发散一下, 我们创建一个函数, 会不会有__proto__呢
function fn() {}
fn.__proto__ === Function.prototype //true
对于声明函数来说,fn有一个prototype, 并且fn.prototype.__proto__ === Object.prototype
fn还有一个__proto__, 并且fn.__proto__ === Function.prototype
是不是有点烧脑呢？
再来个烧脑的, Object, Number, String, Boolean, Function这些构造函数的proto指向
Object.__proto__ === Function.prototype //true
Number.__proto__ === Function.prototype //true
String.__proto__ === Function.prototype //true
Boolean.__proto__ === Function.prototype //true
Function.__proto__ === Function.prototype //true
我们发现,所有构造函数的proto都指向Function.prototype, 因为所有函数都是通过new Function()创造出来的
总结下来, 就是下面的图
以及