方法链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Person( name ){
this.name = name;
}
Person.prototype.showName = function(){
console.log(this.name);
return this;
};
Person.prototype.sayHello = function(){
console.log('Hello !');
};
var person1 = new Person('越今朝');
// person1.showName();
// person1.sayHello();
/*
* 方法链:
* person1.showName().sayHello()
* person1.showName()方法返回自己表示返回一个对象
* 只有对象才能调用函数方法
*
* */
person1.showName().sayHello()
</script>
</body>
</html>
包装对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 包装对象:
* 基础数据类型都有包装对象
* 当某个基础类型在进行 . 操作的时候,会由它的包装对象来代替
* 操作完成之后,包装对象消失
* 每一次找的包装对象都不一样
* */
var str = 'hello';
str.charAt(0);
str.substring();
str.name = 'name';
// 包装对象 name 在基础类型str进行 . 操作的时候进行代替,操作完成之后包装对象消失
alert( str.name ) // undefined
</script>
</body>
</html>
原型链
从构造函数找起,直到Object为止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 原型链: __proto
* 描述对象和原型之间的关系(对象有number属性则输出,没有则用原型属性替代)
* 在构造函数中找number属性,如果找不到则遍历原型找属性number直到Object.prototype,
* 遍历原型的这些对象与原型之间的关系叫原型链
*
* Fn.prototype是一个对象,可以存值
* 基础类型的包装对象不可以存值
*
*
* */
function Fn() {
this.number = 10;
}
Fn.prototype.number = 20;
Object.prototype.number = 30;
var obj = new Fn();
alert(obj.number);
</script>
</body>
</html>
原型链中的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 原型中的默认属性(json格式存储原型的属性没有默认属性)\
* 默认属性 constructor
* Fn.prototype.constructor = Fn (默认值, Fn 为构造函数名)
*
* */
function Fn() {};
Fn.prototype.a = 10;
Fn.prototype.b = 20;
Fn.prototype.c = 30;
// json
// Fn.prototype = {
// a : 10,
// b : 20,
// c : 30,
// };
var obj = new Fn();
alert( obj.constructor );
</script>
</body>
</html>
对象的拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 对象的拷贝:
* 1.浅拷贝
* 2.深拷贝
*
*
* */
var a = {
x : 10,
y : 20,
z : 30,
v : {
aa : 40,
}
};
// b引用a,此处 = 不是赋值而是引用,b的改动会影响a
var b = a;
b.w = 40;
alert( a.w );// 40
var b = Clone(a);
b.w = 40;
alert( a.w ); // undefined
alert( b.w );// 40
b.v.bb = 50;
alert( b.v.bb );// 50
alert( a.v.bb );// 50 浅拷贝
alert( a.v.bb );// undefined 深拷贝
function Clone(obj) {
// 浅拷贝
var newObj = {};
for( var i in obj ){
newObj[i] = obj[i]; // newObj.v = a.v (引用关系)
};
return newObj;
}
function Clone(obj) {
//深拷贝
var newObj = {};
for( var i in obj ){
if ( (typeof obj[i]).toLowerCase() == 'object' ){
// 递归执行深拷贝,无论对象中有几层对象关系都进行如下遍历操作
newObj[i] = Clone(obj[i]);
}else{
newObj[i] = obj[i];
}
};
return newObj;
};
// 深拷贝方法的简写
function Clone(obj) {
for( var i in obj )this[i]=(typeof obj[i]).toLowerCase() == 'object'?new Clone(obj[i]):obj[i];
};
var demo1 = {
x : 10,
y : 20,
z : 30,
v : {
aa : 40,
}
};
var demo2 = new Clone(demo1);
demo2.v.cc = 80;
alert( demo2.v.cc );// 80
alert( demo1.v.cc );// undefined
</script>
</body>
</html>
继承(一)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 继承:
* 1.子级继承父级(父级拥有的子级都拥有)
* 2.子级的改动不影响父级
*
* */
function Person( name, age, sex ) {
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.showName = function () {
alert( this.name );
};
Person.prototype.showAge = function () {
alert( this.age );
};
Person.prototype.showSex = function () {
alert( this.sex );
};
var per1 = new Person( '越祁', 18, '女' );
per1.showSex();
// 继承, 子级 Pson
// 构造函数私有属性的继承
function Pson( name, age, sex, marry ) {
// 构造函数Person的自执行,此时的this指向window
// Person( name, age, sex )
// 子级继承父级私有属性,此处传入的参数this指向子级构造函数
Person.call( this, name, age, sex );
this.marry = marry;
}
// 构造函数公有属性原型的继承,此时 = 是引用,子级会改变父级的原型
// Pson.prototype = Person.prototype;
Pson.prototype = new Clone(Person.prototype);
Pson.prototype.showMarry = function () {
alert(this.marry);
};
var per2 = new Pson( '越今朝', 20, '男', false );
per2.showMarry();
per2.showName();
// 对象深拷贝方法
function Clone(obj) {
for( var i in obj )this[i]=(typeof obj[i]).toLowerCase() == 'object'?new Clone(obj[i]):obj[i];
};
</script>
</body>
</html>
继承(二)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* 继承的第二种方法
*
* */
function Person( name, age, sex ) {
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.showName = function () {
alert( this.name );
};
Person.prototype.showAge = function () {
alert( this.age );
};
Person.prototype.showSex = function () {
alert( this.sex );
};
var per1 = new Person( '越祁', 18, '女' );
per1.showSex();
// 继承, 子级 Pson
// 构造函数私有属性的继承
function Pson( name, age, sex, marry ) {
// 构造函数Person的自执行,此时的this指向window
// Person( name, age, sex )
// 子级继承父级私有属性,此处传入的参数this指向子级构造函数
Person.call( this, name, age, sex );
this.marry = marry;
}
// 构造函数公有属性原型的继承,此时 = 是引用,子级会改变父级的原型
// Pson.prototype = Person.prototype;
//继承的第二种方法, 构造一个构造函数Fn
function Fn(){};
//构造函数Fn对象引用父级对象
Fn.prototype = Person.prototype;
// 构造一个Fn构造函数的对象 Pson.prototype,其可以调用构造函数的公有属性Fn.prototype,但其改变不会影响Fn公有属性
Pson.prototype = new Fn();
Pson.prototype.showMarry = function () {
alert(this.marry);
};
var per2 = new Pson( '越今朝', 20, '男', false );
per2.showMarry();
per2.showName();
</script>
</body>
</html>