一、在 JavaScript ,函数是对象
来看这个例子
function bark() {
console.log('Woof!')
}
bark.animal = 'dog'
我们发现是可以正常运行的,因为在 JavaScript 中是可以的,因为函数是对象!(除了基本类型之外其他都是对象) 函数是一个特殊的对象。你写的这个代码其实不是一个实际的函数。函数是一个拥有属性的对象,并且属性也可被调用。
二、如何给构造函数添加属性
下面来看一个例子
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
console.log(member.getFullName());//TypeError
这时我们发现报错了 ,这时因为我们不能像常规对象那样,给构造函数添加属性。如果你想一次性给所有实例添加特性,你应该使用原型。因此本例中,使用如下方式:
Person.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
这才会使 member.getFullName()
起作用。为什么这么做有益的?假设我们将这个方法添加到构造函数本身里。也许不是每个 Person
实例都需要这个方法。这将浪费大量内存空间,因为它们仍然具有该属性,这将占用每个实例的内存空间。相反,如果我们只将它添加到原型中,那么它只存在于内存中的一个位置,但是所有实例都可以访问它!
三、在函数中,当未使用 new
时,this
引用的是全局对象(global object)。
来看下面的例子
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const lydia = new Person('Lydia', 'Hallie')
const sarah = Person('Sarah', 'Smith')
console.log(lydia)//Person {firstName: "Lydia", lastName: "Hallie"}
console.log(sarah)//undefined
为什么会这样呢?这时因为对于 sarah
,我们没有使用 new
关键字。当使用 new
时,this
引用我们创建的空对象。当未使用 new
时,this
引用的是全局对象(global object)。 我们说 this.firstName
等于 "Sarah"
,并且 this.lastName
等于 "Smith"
。实际上我们做的是,定义了 global.firstName = 'Sarah'
和 global.lastName = 'Smith'
。而 sarah
本身是 undefined
。
四、JavaScript 是一种动态类型语言
来看下面的例子
function sum(a, b) {
return a + b
}
sum(1, '2')//12
这时为什么呢?因为JavaScript 是一种动态类型语言:我们不指定某些变量的类型。值可以在你不知道的情况下自动转换成另一种类型,这种类型称为隐式类型转换(implicit type coercion)。Coercion 是指将一种类型转换为另一种类型。 在本例中,JavaScript 将数字 1
转换为字符串,以便函数有意义并返回一个值。在数字类型(1
)和字符串类型('2'
)相加时,该数字被视为字符串。我们可以连接字符串,比如 "Hello" + "World"
,这里发生的是 "1" + "2"
,它返回 "12"
。
五、{ age: 18 } == { age: 18 }
来看下面的例子
function checkAge(data) {
if (data === { age: 18 }) {
console.log('You are an adult!')
} else if (data == { age: 18 }) {
console.log('You are still an adult.')
} else {
console.log(`Hmm.. You don't have an age I guess`)
}
}
checkAge({ age: 18 })//Hmm.. You don't have an age I guess
其实在测试相等性时,基本类型通过它们的值(value)进行比较,而对象通过它们的引用(reference)进行比较。JavaScript 检查对象是否具有对内存中相同位置的引用。 题目中我们正在比较的两个对象不是同一个引用:作为参数传递的对象引用的内存位置,与用于判断相等的对象所引用的内存位置并不同。 这也是 { age: 18 } === { age: 18 }
和 { age: 18 } == { age: 18 }
都返回 false
的原因。
六、use strict的使用
话不多少直接上代码
function getAge() {
'use strict'
age = 21
console.log(age)
}
getAge() //ReferenceError
这是因为使用 "use strict"
,你可以确保不会意外地声明全局变量。我们从来没有声明变量 age
,因为我们使用 "use strict"
,它将抛出一个引用错误。如果我们不使用 "use strict"
,它就会工作,因为属性 age
会被添加到全局对象中了。
七、sessionStorage存储的数据什么时候会删除
关闭 tab 标签页 后,
sessionStorage
存储的数据才会删除。 如果使用localStorage
,那么数据将永远在那里,除非调用了localStorage.clear()
。
八、hasOwnProperty() 方法详解
hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性,如果是,返回true,否者false; 参数propertyName指要检测的属性名;
用法:object.hasOwnProperty(propertyName) // true/false
hasOwnProperty() 方法是 Object 的原型方法(也称实例方法),它定义在 Object.prototype 对象之上,所有 Object 的实例对象都会继承 hasOwnProperty() 方法。
hasOwnProperty() 只会检查对象的自有属性,对象原形上的属性其不会检测;但是对于原型对象本身来说,这些原型上的属性又是原型对象的自有属性,所以原形对象也可以使用hasOwnProperty()检测自己的自有属性;
let obj = {
name:'张睿',
age:18,
eat:{
eatname:'面条',
water:{
watername:'农夫山泉'
}
}
}
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('age')) //true
console.log(obj.hasOwnProperty('eat')) //true
console.log(obj.hasOwnProperty('eatname')) //false
console.log(obj.hasOwnProperty('water')) //false
console.log(obj.hasOwnProperty('watername')) //false
console.log(obj.eat.hasOwnProperty('eatname')) //true
console.log(obj.eat.hasOwnProperty('water')) //true
console.log(obj.eat.hasOwnProperty('watername')) //false
console.log(obj.eat.water.hasOwnProperty('watername')) //true
九、js中的truthy与falsy
truthy不等于true,是指在布尔上下文中转换后的值为真的值;
falsy不等于false,是指在js中所有表达式为false的值;
所有值都是真值,除非被定义为falsy
falsy值有:undefined null NAN “” 0 false
truthy示例
if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
falsy示例
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
十、当为数组设置超过数组长度的值的时候会怎样?
先看下面的例子
const numbers = [1, 2, 3]
numbers[10] = 11
console.log(numbers)//[1, 2, 3, 7 x empty, 11]
其实当你为数组设置超过数组长度的值的时候, JavaScript 会创建名为 "empty slots" 的东西。它们的值实际上是 undefined
。你会看到以下场景: [1, 2, 3, 7 x empty, 11]
这取决于你的运行环境(每个浏览器,以及 node 环境,都有可能不同)