前端技术分享
0%

发表于 更新于 分类于

有限的实例对象和原型之间组成有限链，用来实现共享属性和继承的。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn01(){
   this.name01 = 'fn01';
}
function fn02(){
   this.name02 = 'fn02';
}
fn02.prototype = new fn01();
function fn03(){
   this.name03 = 'fn03';
}
fn03.prototype = new fn02();
let newFn = new fn03();
console.log(newFn);

返回结果：

1
2
3
4
5
6
7
8
name03: "fn03"
__proto__: fn01
	name02: "fn02"
	__proto__: fn01
		name01: "fn01"
		__proto__:
			constructor: ƒ fn01()
			__proto__: Object

构造函数、原型和实例的关系

  • 构造函数都有一个属性prototype，这个属性是一个对象（Object的实例）
  • 原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数
  • 实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的

prototype与_proto_的关系

  • prototype是构造函数的属性
  • _proto_是实例对象的属性

发表于 更新于 分类于

用法

函数 用法
call() call(对象, arg1, arg2, …)
apply() apply(对象，[arg1,arg2, …])
bind() 函数.bind(对象, arg1, arg2, …)
  • 相同点：都是用来改变this的指向
  • 不同点：参数书写方式不同

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head></head>
	<body></body>
	<script type="text/javascript">

		let obj = {
			name: 'name',
			age: 18
		};
		function fn(x, y) {
			console.log(x, y, this);
		}

		fn.call(obj, 'call-xiao', 'call-ming'); 
        // call-xiao call-ming {name: "name", age: 18}

		fn.apply(obj, ['apply-xiao', 'apply-ming']); 
        // apply-xiao apply-ming {name: "name", age: 18}

		let newFn = fn.bind(obj, 'bind-xiao', 'bind-ming');
		newFn(); 
        // bind-xiao bind-ming {name: "name", age: 18}

	</script>
</html>

call()的应用

  • 利用call()判断数据类型

    1
    2
    let type = Object.prototype.toString.call(12);
    console.log(type);

  • 利用call()翻转字符串

    1
    2
    3
    4
    5
    6
    7
    8
    let str = 'hello';
    // 方式一，方法内有使用call()
    let arr01 = Array.from(str).reverse().join('');
    console.log(arr01); // olleh

    // 方式二
    let arr02 = Array.prototype.reverse.call(str.split('')).join('');
    console.log(arr02); // olleh

apply()的应用

利用apply()求最大值

1
2
3
4
let arr = [1, 4, 2, 3, 9, 7];
let max = Math.max.apply(arr, arr); 
// 第一个arr表示让arr借用max这个方法，第二个arr表示传给max的数据
console.log(max); // 9

bind()的应用

对一个函数预设初始参数

1
2
3
4
5
function fn() {
	return Array.from(arguments);
}
let newFn = fn.bind(this, 1, 2);
console.log(newFn()); // [1, 2]

发表于 更新于 分类于

单行文本的垂直居中

类型 属性 值
水平居中 text-align center
垂直居中 line-height XXpx

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#div01 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<span>name</span>
		</div>
	</body>
</html>

多行文本的垂直居中

使用display:table来实现

属性 值 说明
display table 使块状元素成为一个块级表格
display table-cell 子元素设置成表格单元格
vertical-align middle 使表格内容居中显示，即可实现垂直居中的效果

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#div01 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
				display: table;
			}
			#div01 span {
				display: table-cell;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<span>name</span>
		</div>
	</body>
</html>

元素的垂直居中

1，使用absolute与transform配合实现

步骤：

  • 首先给父级元素添加相对定位position: relative;
  • 然后给子级元素添加绝对定位 position: absolute;（即需要垂直居中的元素）
  • 最后让子级距离父级左边和上边分别为left: 50%; top: 50%; transform: translate(-50%, -50%);

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#div01 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				position: relative;
			}
			#div02 {
				width: 30px;
				height: 30px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="div02"></div>
		</div>
	</body>
</html>

2，使用flex实现

属性 值 说明
display flex 弹性容器
justify-content center 定义了项目在主轴上的对齐方式，水平对齐居中
align-items center 定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#div01 {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#div02 {
				width: 30px;
				height: 30px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="div02"></div>
		</div>
	</body>
</html>

发表于 更新于 分类于

参考文档：Object.defineProperty

一，语法

1
Object.defineProperty(obj, prop, desc)
参数 说明
obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符

二，示例

1
2
3
4
5
6
7
8
9
10
let obj = {};
Object.defineProperty(obj, 'a', {
	value : 20,
	writable : true,
	enumerable : true,
	configurable : true,
	get() {},
	set() {}
});
console.log(obj.a);  // 20
参数 说明
value 属性的初始化值
writeble 是否可修改值的内容
enumerable 是否可枚举，默认为false
configurable 是否可删除，默认为false
get 在读取属性时调用的函数，默认值为undefined
set 在写入属性时调用的函数，默认值为undefined

三，writeble 属性

当writable属性设置为false时，该属性被称为“不可写”。它不能被重新分配。

默认为 false，如下：

1
2
3
4
5
6
7
let obj = {};
obj.a = 10;
console.log(obj.a); // 10
Object.defineProperty(obj, 'b', {});
console.log(obj.b); // undefined
obj.b = 20
console.log(obj.b) // undefined

设置为 true，如下:

1
2
3
4
5
6
7
let obj = {};
obj.a = 10;
console.log(obj.a) // 10
Object.defineProperty(obj, 'b', { writable: true });
console.log(obj.b) // undefined
obj.b = 20
console.log(obj.b) // 20

四，enumerable 属性

默认为 false

enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let obj = {};
Object.defineProperty(obj, 'a', { enumerable: false });
Object.defineProperty(obj, 'b', { enumerable: true });
Object.defineProperty(obj, 'c', {});
obj.d = null;  // 直接赋值时, enumerable 为 true

// ------ for...in ------
let arr = [];
for (let i in obj) {
	arr.push(i);
}
console.log(arr);  // ["b", "d"]

// ------ Object.keys() ------
let keys = Object.keys(obj);
console.log(keys);  // ["b", "d"]

五，configurable 属性

configurable 特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。

默认为 false，如下：

1
2
3
4
5
6
7
8
9
10
let obj = {};
Object.defineProperty(obj, 'a', {
	configurable: false,
	get() {
		return 123;
	}
});
console.log(obj.a);  // 123
delete obj.a;
console.log(obj.a);  // 123

设置为 true，如下:

1
2
3
4
5
6
7
8
9
10
let obj = {};
Object.defineProperty(obj, 'a', {
	configurable: true,
	get() {
		return 123;
	}
});
console.log(obj.a);  // 123
delete obj.a;
console.log(obj.a);  // undefined

六，一般的 Setters 和 Getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn (args) {
	Object.defineProperty(this, 'myproperty', {
		get() {
			return args;
		},
		set(res) {
			this.val = res;
		}
	})
}
let _fn = new fn('get');
let myproperty = _fn.myproperty;
console.log(myproperty);  // get
_fn.myproperty = 'set';
let val = _fn.val;
console.log(val);  // set

七，添加多个属性和默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let obj = {};
	
obj.a = 1;
// 等同于
Object.defineProperty(obj, 'a', {
	value: 1,
	writable: true,
	enumerable: true,
	configurable: true
});

Object.defineProperty(obj, 'b', { value: 2 });
// 等同于
Object.defineProperty(obj, 'a', {
	value: 1,
	writable: false,
	enumerable: false,
	configurable: false
});