1. 构造函数与普通函数
1.1普通函数--主要用来封装 处理业务逻辑
1.2构造函数--批量实例化对象
// 普通函数--主要用来封装 处理业务逻辑
// function fun(形参){
// // 代码块
// // this(window)
// // arguments(参数集合-伪数组)
// }
// fun(实参);
function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
var rel = sum(1, 2, 3, 5, 5, 6, 6, 7);
console.log(rel);
// 构造函数--批量实例化对象
function Create(name, age, gender) {
// this--实例化对象
// arguments
this.name = name;
this.age = age;
this.gender = gender
}
var per = new Create("小谷", 18, "男");
console.log(per);
2. JS构造函数的实例成员和静态成员
1.1.1实例成员
实例成员就是在构造函数内部添加的成员,只能由实例化的对象来访问
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function () {
console.log(this.name + '在奔跑');//张三在奔跑
}
}
var p1 = new Person('张三', 20); // 创建实例化对象
console.log(p1.name); // 张三 用实例化对象访问name属性
p1.run(); // 用实例化对象访问run方法
console.log(Person.name); //Person
1.1.2静态成员
在构造函数本身上添加的成员,只能由构造函数本身来访问
function Person(name, age) {
this.name = name;
this.age = age;
this.run = function () {
console.log(this.name + '在奔跑');
}
}
var p2 = new Person('李四', 24); // 创建实例化对象
Person.sex = '男'; // 创建静态成员
console.log(Person.sex); // '男'
console.log(p2.sex); //undefind
1.2构造函数原型prototype
function Create(name, age, gender) {
// this--实例化对象
// arguments
this.name = name;
this.age = age;
this.gender = gender;
// this.rap = function () {
// console.log("临时抱佛脚");
// }
}
Create.prototype.rap = function () {
console.log("临时抱佛脚");//临时抱佛脚
}
var per = new Create("小谷", 18, "男");
var per2 = new Create("小谷2", 18, "男");
var per3 = new Create("小谷2", 18, "男");
var per4 = new Create("小谷2", 18, "男");
var per5 = new Create("小谷2", 18, "男");
var per6 = new Create("小谷2", 18, "男");
console.log(per);//Create {name: '小谷', age: 18, gender: '男'}
console.log(per2);//Create { name: '小谷2', age: 18, gender: '男' }
per.rap();
per2.rap();
console.log(Create.prototype);//{rap: ƒ, constructor: ƒ}
JS规定每一个构造函数都有一个属性叫 prototype 它是一个对象,称为原型对象
1.3对象原型
原型:每一个构造函数都有一个prototype属性是原型对象, 每一个对象都一个__proto__ 称为 对象的原型 原型链:对象在查找一个属性的时候,会先在自身查找,如果没有找到,就会在对象的原型(__proto__ )上查找就是构造函数的prototype,如果还没有找到就会去构造函数的prototype 的__proto__身上查找,直到查找到Object 这样一层一层向上查找形成一个链式结构称为原型链
function Create(name, age, gender) {
// this--实例化对象
// arguments
this.name = name;
this.age = age;
this.gender = gender;
// this.rap = function () {
// console.log("临时抱佛脚");
// }
}
Create.prototype.rap = function () {
console.log("临时抱佛脚");
}
var per = new Create("小谷", 18, "男");
var per2 = new Create("小谷2", 18, "男");
console.log(Create.prototype);
// Create.prototype.__proto__ 指向Object
console.log(per);
// 每一个对象都一个__proto__属性这个属性就是对象的原型
// 对象身上的__proto__ == 构造函数的prototype
// 因此可以在对象身上访问到 Create.prototype.rap
console.log(per.rap);
1.4 constructor构造函数
1.4.1 Object.prototype.hasOwnProperty(prop)方法 返回值为:布尔值
function Create(name, age, gender) {
// this--实例化对象
// arguments
this.name = name;
this.age = age;
this.gender = gender;
// this.rap = function () {
// console.log("临时抱佛脚");
// }
}
Create.prototype.rap = function () {
console.log("临时抱佛脚");
}
var per = new Create("小谷", 18, "男");
per.height = "178cm";
console.log(per);
console.log(per.hasOwnProperty('name'));
console.log(per.hasOwnProperty('height'));
console.log(per.hasOwnProperty('rap'));//false
1.4.2 Object.prototype.isPrototypeOf(Object)方法 返回一个布尔值
var date = new Date();
console.dir(date);
var reg = new RegExp();
var num = new Number();
var obj = {
name: "123"
}
console.log(date.isPrototypeOf(Object));//false
console.log(reg.isPrototypeOf(Object));//false
console.log(num.isPrototypeOf(Object));//false
console.log(obj.isPrototypeOf(Object));//false
console.log(Object.prototype.isPrototypeOf(date));//true
console.log(Object.prototype.isPrototypeOf(reg));//true
console.log(Object.prototype.isPrototypeOf(num));//true
console.log(Object.prototype.isPrototypeOf(obj));//true
扩展(在构造函数身上封装方法)
Array.prototype.sum = function () {
var rel = 0;
console.log(this);
for (var i = 0; i < this.length; i++) {
rel += this[i];
}
return rel;
}
var arr = [1, 2, 3, 4, 5, 5, 6, 7, 8];
var arr2 = [67, 89, 45, 32, 2, 13, 41, 3, 345, 36, 456, 5];
console.log(arr.sum());
console.log(arr2.sum());
// 商品 方法
Object.prototype.formatting = function () {
console.log(this);
if (this.price.includes("¥")) {
console.log(1);
return
} else {
// replace(target,newStr)
// this.price.replace()
this.price = "¥" + this.price
}
return this.price
}
var obj = {
title: "小米手机",
msg: "为发烧而生",
price: "678"
}
var obj2 = {
title: "好谷",
msg: "让河南学子创造中国互联网未来",
price: "¥985"
}
console.log(obj.formatting());
console.log(obj);
1.8原型对象中this指向
构造函数中的this和原型对象的this,都指向我们new出来的实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
// 1.普通函数---window
function fun() {
console.log(this);
}
fun();
// 2.自执行函数---window
(function () {
console.log(this);
})();
// 3.定时器---window
setTimeout(function () {
console.log(this);
}, 100)
// 4.对象方法中的this--该方法所属对象
var obj = {
name: "张三",
sayHi: function () {
console.log(this);
}
}
obj.sayHi();
// 5.事件中的this----事件源
box.onclick = function () {
console.log(this);
}
// 6.构造函数--实例化对象
function Fun() {
console.log(this);
}
// 7.构造函数原型对象上的函数 this-----实例化对象
Fun.prototype.run = function () {
console.log(this);
}
var p1 = new Fun();
p1.run();
</script>
</body>
</html>