JS对象与函数的运用
Object 增删改查
删除
对于所有情况,返回值为true
let obj = {
'name' : 'aziz',
'age' : 18
}
定义为undefined | null
或 delete obj.
obj.name = undefined; // undefined 为「空」 不是没有
'name' in obj // true。name不添加‘’,name则为变量名
delete obj.name; // 彻底删除
delete obj['name'];
增加和修改属性
增加和修改属性方法类似,没有属性直接添加,有该属性直接赋值
let obj = { 'name': 'aziz' , 'age' : '18'}
obj.name = "吴彦祖"
obj.['name'] = '刘德华'
obj.['na'+'me'] = '周杰伦'
利用asssign
批量修改
Object.assign(obj,{ gender:'男', id:'130'})
查询
通过对象keys()
或values()
查询
let obj = {
'name' : 'aziz',
'age' : 18
}
Object.keys()
Object.keys(obj) // (2) ["name", "age"]
Object.values()
Object.values(obj) // (2) ["aziz", 18]
判断属性是否自身属性还是共有的
‘name’ in obj; // 只能查看是否有此属性
'toString' in obj; // 自身并没有 toString 属性,同样返回 true
obj.hasOwnProperty('name'); // 查看自身是否有该属性
// API英语解析:has 有 own 自身 property 属性
原型链
xxx.prototype
函数无法修改原型,而一旦只要找到原型的位置即可随意修改原型函数
共有属性的合集就是原型prototype
修改共有属性
obj.__proto__.toString = 'xxx'
obj.__proto__ = null
Object.prototype.toString = 'xxx'
修改隐藏属性:Object.create
let common = {'国籍':'中国', '性别':'男'}
let obj = Object.create(common)
console.dir(obj)
Object
__proto__:
国籍: "中国"
性别: "男"
⚠️注意:所有的数据类型都是由Function
构造出来的
除去``Null
Undefined其他数据类型的构造者都是
Function`
Number.constructor === Function
String.constructor === Function
Syboml.constructor === Function
Boolean.constructor === Function
Object.constructor === Function
// 连Function自身构造者都相等,可以理解JS引擎在加载浏览器的时候初始化Function
Function.constructor === Function
有关widow的问题
所有属性可以通过contructor
查看构造者
window
由Window
构造出来的window.Object
是有window.Function
构造出来window.Function
由浏览器(js引擎)构造出来
构造函数
new() 与 this 操作流程
- 创建空对象
- 为空对象关联原型
X.prototype
- 将空对象作为
this
关键字运行构造函数 - 自动
return this
代码预定规范
构造函数首字母大写,函数首字母小写
其他函数一般使用动词开头
class 类
属于ES6新语法class
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function(){
console.log( '你好,我叫' + this.name + ',今年' + this.age + '岁!')
}
class Person{
constructor(name,age){
this.name = name;
this.age = age
}
sayHi(){
console.log('你好,我叫' + this.name + ',今年' + this.age + '岁!')
}
}
// !输出结果 ↓
let person = new Person('Aziz', 18)
person.sayHi()
// 你好,我叫Aziz,今年18岁!
对象分类
-
宿主对象(host Objects):由 JavaScript 宿主环境提供的对象,它们的行为完全由宿主环境决定。
-
内置对象(Built-in Objects):由 JavaScript 语言提供的对象。
- 固有对象(Intrinsic Objects ):由标准规定,随着 JavaScript 运行时创建而自动创建的对象实例。
- 原生对象(Native Objects):可以由用户通过 Array、RegExp 等内置构造器或者特殊语法创建的对象。
- 普通对象(Ordinary Objects):由语法、Object 构造器或者 class 关键字定义类创建的对象,它能够被原型继承。
例子
- 对象有一样的属性和行为。如
square1
和square2
- 对象拥有其他的属性和行为。如
Square / Circle / Rect
等等不同的分类 - Array 和 Function 也是不同分类
Object创建出来的最没有特色的分类let obj = {}
数组对象
定义一个数组
let arr = [1,2,3]
// 属性名:字符串和length(不能被遍历)
数组共有属性
// 常用的有
push | pop | shift | unshift | join
函数对象
定义一个函数
function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn = (x,y) => x+y
let fn = new Function('x','y','return x+y')
函数自有属性
name | length
函数共有属性
// 常用
call | apply | bind
call | apply | bind
function People(name, age) {
this.name = name;
this.age = age;
}
function Student(name, age) {
People.call(this, name, age);
this.country = 'China';
console.log('欢迎回来,' + this.name + ' !' )
}
let sam = new Student('sam', 10);
let boys = new Student('boys', 11);
function student(name, age){
console.log(this.sayHello + ',我叫'+ name + ',今年' + age + '岁!')
}
let obj = { sayHello: '我来自广州市第一人民学校'}
// 先定义才能使用 function 函数
obj.fn = student
obj.fn('aziz',18)
//我来自广州市第一人民学校,我叫aziz,今年18岁!
student.apply(obj, ['数组', 1]);
// 我来自广州市第一人民学校,我叫数组,今年1岁!
student.bind(obj)(console.log('hi'), console.log('hello'));
// hi
// hello
// 我来自广州市第一人民学校,我叫undefined,今年undefined岁!
student.call(obj, 'call', 19);
// 我来自广州市第一人民学校,我叫call,今年19岁!
三者都拥有一样的能力完成同一件事
function bind()
window.name = "global "
function student(){
console.log('对象 ' + this.name)
}
let callName = {name:'callName'}
let obj = {
name: 'aziz',
fn: student.bind(),
fn2: student
}
obj.fn.call(obj)
obj.fn2.call(obj)
console.log('======')
obj.fn.apply(obj)
obj.fn2.apply(obj)
console.log('======')
obj.fn.bind(callName)()
obj.fn2.bind(callName)()
一旦被函数bind以后,其this会被锁定无法更改。
end.