JS创建对象和实现继承的方式
前端知识点:
一、创建对象的方式
工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式、
1.工厂模式
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name)
}
return o;
}
var person1 = createPerson(‘Hj’,24,‘Teacher’);
2.构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name)
}
}
var person1 = new Person(‘Hj’,24,‘Teacher’);
3.原型模式
function Person(){ }
Person.prototype = {
constructor: Person,
name:‘Hj’,
age: 24,
job:’Teacher’,
sayName: function(){
alert(this.name)
}
}
组合使用构造函数模式和原型模式(使用最广泛、认同度最高)
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
sayName: function(){
alert(this.name)
}
}
4.动态原型模式
function Person(name,age){
this.name = name;
this.age = age;
}
if (typeof this.sayName !=“function”){
Person.prototype.sayName = function(){
alert(this.name)
}
}
5.寄生构造函数模式
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name)
}
return o;
}
var person1 = new Person(‘Hj’,24,‘Teacher’);
6.稳妥构造函数模式
function Person(name,age,job){
var o = new Object();
//在这里定义私有变量和函数
o.sayName = function(){
alert(this.name)
}
return o;
}
除了调用sayName()方法外,没有别的方式访问对象的数据
二、继承
原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承
1.原型链
2.子类原型指向父类的实例对象
SubType.prototype = new SuperType();
3.借用构造函数
function SubType(){
//继承了SuperType
SuperType.call(this);
}
4.组合继承(最常用的继承模式)
function SubType(name,age){
//继承了SuperType属性
SuperType.call(this,name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = subType;
三、函数
1.递归
function factorial(num){
if(num < 1){
return 1;
} else {
return num * arguments.callee(num -1);
}
}
factorial(5) // 120
2.闭包
闭包是指有权访问另一个函数作用域中的变量的函数。
常用创建方式:在一个函数内部创建另一个函数。
四、BOM浏览器对象模型
window对象
window.open(‘url’, target属性或窗口名称)
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name-窗口名称
关闭打开的窗口
var newWindow = window.open(‘http://www.baidu.com’);
newWindow.close();
五、DOM操作
选择符API
querySelector() 返回该模式匹配的第一个css选择符元素
querySelectorAll() 返回该模式匹配的所有css选择符元素